diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts
index 24e09749352..51a39d58d65 100644
--- a/e2e/components/SegmentedControl.test.ts
+++ b/e2e/components/SegmentedControl.test.ts
@@ -64,6 +64,10 @@ const stories = [
     title: 'Dev: With Css',
     id: 'components-segmentedcontrol-dev--with-css',
   },
+  {
+    title: 'Dev: Truncation',
+    id: 'components-segmentedcontrol-dev--in-narrow-container',
+  },
 ] as const
 
 test.describe('SegmentedControl', () => {
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
index 38519ec7f5a..5b561dab3f2 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
@@ -31,3 +31,19 @@ export const WithCss = () => (
     </SegmentedControl.Button>
   </SegmentedControl>
 )
+
+export const InNarrowContainer = () => (
+  <div style={{width: '275px', border: '1px solid black', padding: '8px'}}>
+    <SegmentedControl aria-label="File view" fullWidth>
+      <SegmentedControl.Button defaultSelected aria-label={'Preview'} leadingIcon={EyeIcon}>
+        Preview
+      </SegmentedControl.Button>
+      <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>
+        Raw
+      </SegmentedControl.Button>
+      <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>
+        Blame
+      </SegmentedControl.Button>
+    </SegmentedControl>
+  </div>
+)
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css
index 2717c72816b..2895ae680b0 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css
@@ -1,14 +1,13 @@
 .SegmentedControl {
   display: inline-flex;
-
-  /* TODO: use primitive `control.{small|medium}.size` when it is available */
-  height: 32px;
+  height: var(--control-medium-size);
   padding: 0;
   margin: 0;
   font-size: var(--text-body-size-medium);
   background-color: var(--controlTrack-bgColor-rest);
   border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);
   border-radius: var(--borderRadius-medium);
+  max-width: 100%;
 
   &:where([data-full-width]) {
     display: flex;
@@ -16,8 +15,7 @@
   }
 
   &:where([data-size='small']) {
-    /* TODO: use primitive `control.{small|medium}.size` when it is available */
-    height: 28px;
+    height: var(--control-small-size);
     font-size: var(--text-body-size-small);
   }
 }
@@ -30,6 +28,7 @@
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: -1px;
   flex-grow: 1;
+  min-width: 0;
 
   &:not(:last-child) {
     /* stylelint-disable-next-line primer/spacing */
@@ -193,15 +192,22 @@
   }
 }
 
-.Text::after {
-  display: block;
-  height: 0;
+.Text {
+  flex: 1;
   overflow: hidden;
-  font-weight: var(--base-text-weight-semibold);
-  pointer-events: none;
-  visibility: hidden;
-  content: attr(data-text);
-  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::after {
+    display: block;
+    height: 0;
+    overflow: hidden;
+    font-weight: var(--base-text-weight-semibold);
+    pointer-events: none;
+    visibility: hidden;
+    content: attr(data-text);
+    user-select: none;
+  }
 }
 
 .LeadingIcon {