diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index d64688289c1..9445a984c1c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png
index 8ae00a34c45..3875cee7b03 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index afe39534d99..2fa7cfc4392 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png
index b6b9b748775..9b0c26ffaf2 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png
index afe39534d99..2fa7cfc4392 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png
index 0ac5c0b4134..fa51af48f66 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index a650870af07..65c56e9924c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png
index 4f38c7d7544..5554d4ba86c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index 410f6780bf7..bd94d8ce982 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png
index 95fe0c0e22e..3218d9975fd 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png
index 410f6780bf7..bd94d8ce982 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png
index fa0e3f51a13..ff2f3222bcf 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png differ
diff --git a/packages/eui/changelogs/upcoming/9231.md b/packages/eui/changelogs/upcoming/9231.md
new file mode 100644
index 00000000000..879846f7968
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9231.md
@@ -0,0 +1,5 @@
+- Added `euiTextTruncateCSS` Emotion style utility
+
+**Bug fixes**
+
+- Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly
\ No newline at end of file
diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 38b0e80ed9c..08a03ae132b 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -53,7 +53,11 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -134,7 +138,11 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -343,7 +351,11 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -490,7 +502,11 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -551,7 +567,11 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -635,7 +655,11 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -716,7 +740,11 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -798,7 +826,11 @@ exports[`EuiSuperDatePicker renders 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
index 10255c59f84..8b54a38ee43 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -18,6 +18,7 @@ import dateMath from '@elastic/datemath';
 
 import { useEuiMemoizedStyles, RenderWithEuiTheme } from '../../../services';
 import { isObject } from '../../../services/predicate';
+import { euiTextTruncateCSS } from '../../../global_styling';
 import { EuiI18nConsumer } from '../../context';
 import { CommonProps } from '../../common';
 import { EuiDatePickerRange } from '../date_picker_range';
@@ -667,12 +668,14 @@ export class EuiSuperDatePickerInternal extends Component<
                       {isDisabledDisplay ? (
                         isDisabled.display
                       ) : (
-                        <PrettyDuration
-                          timeFrom={start}
-                          timeTo={end}
-                          quickRanges={commonlyUsedRanges}
-                          dateFormat={dateFormat}
-                        />
+                        <span css={euiTextTruncateCSS()}>
+                          <PrettyDuration
+                            timeFrom={start}
+                            timeTo={end}
+                            quickRanges={commonlyUsedRanges}
+                            dateFormat={dateFormat}
+                          />
+                        </span>
                       )}
                     </EuiFormControlButton>
                   </EuiToolTip>
diff --git a/packages/eui/src/global_styling/mixins/_typography.ts b/packages/eui/src/global_styling/mixins/_typography.ts
index 3b031c2d3c8..dbaa7b06f65 100644
--- a/packages/eui/src/global_styling/mixins/_typography.ts
+++ b/packages/eui/src/global_styling/mixins/_typography.ts
@@ -7,6 +7,7 @@
  */
 
 import { CSSProperties } from 'react';
+import { css } from '@emotion/react';
 import {
   euiLineHeightFromBaseline,
   euiFontSizeFromScale,
@@ -87,6 +88,16 @@ export const euiTextTruncate = (
   white-space: nowrap !important;
 `;
 
+/**
+ * Emotion CSS wrapper around `euiTextTruncate` style.
+ */
+export const euiTextTruncateCSS = (
+  maxWidth: CSSProperties['maxWidth'] = '100%'
+) =>
+  css`
+    ${euiTextTruncate(maxWidth)}
+  `;
+
 /**
  * Fixed-width numbers for tabular data
  */