+ Use this Sass mixin to apply number text styles to your selectors.
+ No parameters are taken for this utility.
+
+ }
+ snippet={'@include euiNumberFormat;'}
+ snippetLanguage="scss"
+ />
+ )}
+ >
+ );
+};
diff --git a/src-docs/src/views/text_utilities/text_utilities_example.js b/src-docs/src/views/text_utilities/text_utilities_example.js
new file mode 100644
index 00000000000..27260b29d97
--- /dev/null
+++ b/src-docs/src/views/text_utilities/text_utilities_example.js
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { EuiText } from '../../../../src/components';
+
+import TextAlignUtilities from './align';
+import TextWrappingUtilities from './wrapping';
+import TextNumberUtilities from './numbers';
+import TextColorUtilities from './color';
+
+export const TextUtilitiesExample = {
+ title: 'Text',
+ showThemeLanguageToggle: true,
+ intro: (
+
+
+ These text utilities are available primarily as CSS classes to aid in
+ quickly styling your text. Some utilities are additionally available as
+ either CSS-in-JS or Sass mixins to optionally compose within your own
+ custom styles.
+
+ Truncates text at 100% width of its parent and will display an
+ ellipsis.
+
+
+ Tip: When truncating text, it is recommended to
+ include the full text within an HTML title{' '}
+ attribute or by wrapping the element within an{' '}
+ EuiToolTip.
+
+ >
+ }
+ example={
+
+ This text will not to wrap but truncate beyond the boundaries of the
+ yellow box.
+
+ }
+ snippet={`
+ Use this style function to apply truncation within your
+ CSS-in-JS styling.
+
+
+ This utility accepts a single optional parameter for customizing
+ the maximum width of the truncated text. If not passed, it
+ defaults to max-width: 100%;.
+
+ Wraps the text across lines always forcing the last word on the line
+ to break.
+
+ }
+ example={
+
+ This text block will wrap, breaking up anything including long URLs{' '}
+ {longLink} and run on strings like this
+ --------------------------------------------------------------------------.
+
+ }
+ snippet={`
+ Reverts the text back to the normal wrapping scheme of not forcing
+ word breaks.
+
+ }
+ example={
+
+ This text block will wrap normally, but will not break long URLs{' '}
+ {longLink} but may break run on strings like this
+ ---------------------------------------------------------------.
+
+ }
+ snippet={`
+ /* Your content */
+
`}
+ />
+ >
+ );
+};
diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js
index 85978bfdbc5..2c7a73045b8 100644
--- a/src-docs/src/views/utility_classes/utility_classes_example.js
+++ b/src-docs/src/views/utility_classes/utility_classes_example.js
@@ -1,24 +1,37 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import { EuiSpacer, EuiText } from '../../../../src/components';
-import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule';
+import {
+ EuiSpacer,
+ EuiText,
+ EuiCallOut,
+ EuiHorizontalRule,
+} from '../../../../src/components';
import UtilityClassesDisplay from './utility_classes';
-import UtilityClassesText from './utility_classes_text';
import UtilityClassesVertAlign from './utility_classes_vert_align';
import UtilityClassesResponsive from './utility_classes_responsive';
export const UtilityClassesExample = {
title: 'CSS utility classes',
intro: (
-
-
- The following CSS-only classes are provided as helper utilities. They
- are useful for making micro-adjustments to existing React components.
+ <>
+
+
+ The following CSS-only classes are provided as helper utilities. They
+ are useful for making micro-adjustments to existing React components.
+
+
+
+
For overflow and scrolling specific utilities, go to the{' '}
Scroll documentation page.
-
`}
- />
-
- Forces text not to wrap even in small containers.}
- example={
-
- This text will not to wrap but extend beyond the boundaries of the
- yellow box.
-
- }
- snippet={`
- /* Your content */
-
`}
- />
-
-
-
- Truncates text at 100% width of its parent and will display an
- ellipsis.
-
-
- Tip: When truncating text, it is recommended to
- include the full text within an HTML title{' '}
- attribute or by wrapping the element within an{' '}
- EuiToolTip.
-
- >
- }
- example={
-
- This text will not to wrap but truncate beyond the boundaries of the
- yellow box.
-
- }
- snippet={`
- /* Your content */
-
`}
- />
-
-
- Wraps the text across lines like normal, but forces long words like
- {" URL's"} to break.
-
- }
- example={
-
- This text will wrap like normal but this long link {longLink} will
- break mid-word.
-
- }
- snippet={`
- /* Your content */
-
`}
- />
-
-
- Wraps the text across lines always forcing the last word on the line
- to break.
-
- }
- example={
-
- This text block will wrap, breaking up anything including long{' '}
- {"URL's"} {longLink} and run on strings like this
- --------------------------------------------------------------------------.
-
- }
- snippet={`
- /* Your content */
-
`}
- />
-
-
- Reverts the text back to the normal wrapping scheme of not forcing
- word breaks.
-
- }
- example={
-
- This text block will wrap normally, but will not break long {"URL's"}{' '}
- {longLink} but may break run on strings like this
- ---------------------------------------------------------------.
-
- }
- snippet={`
- /* Your content */
-
`}
- />
-
-
- Applies{' '}
- {'font-feature-settings: "tnum";'}{' '}
- so that numbers align more properly in a column, especially when right
- aligned.
-
- }
- example={
-
-
-
-
-
-
-
-
-
- ,
- "ctr": 2,
- "insertionPoint": undefined,
- "isSpeedy": false,
- "key": "css",
- "nonce": undefined,
- "prepend": undefined,
- "tags": Array [
- ,
- ,
- ],
- },
- }
- }
- isStringTag={true}
- serialized={
- Object {
- "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpdGxlLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRlEiLCJmaWxlIjoidGl0bGUuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCBFbGFzdGljc2VhcmNoIEIuVi4gYW5kL29yIGxpY2Vuc2VkIHRvIEVsYXN0aWNzZWFyY2ggQi5WLiB1bmRlciBvbmVcbiAqIG9yIG1vcmUgY29udHJpYnV0b3IgbGljZW5zZSBhZ3JlZW1lbnRzLiBMaWNlbnNlZCB1bmRlciB0aGUgRWxhc3RpYyBMaWNlbnNlXG4gKiAyLjAgYW5kIHRoZSBTZXJ2ZXIgU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxOyB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdFxuICogaW4gY29tcGxpYW5jZSB3aXRoLCBhdCB5b3VyIGVsZWN0aW9uLCB0aGUgRWxhc3RpYyBMaWNlbnNlIDIuMCBvciB0aGUgU2VydmVyXG4gKiBTaWRlIFB1YmxpYyBMaWNlbnNlLCB2IDEuXG4gKi9cblxuaW1wb3J0IHsgQ1NTUHJvcGVydGllcyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFVzZUV1aVRoZW1lLCB1c2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzJztcbmltcG9ydCB7XG4gIGV1aVRleHRCcmVha1dvcmQsXG4gIGV1aUZvbnRTaXplLFxuICBfRXVpVGhlbWVGb250U2NhbGUsXG4gIF9FdWlUaGVtZUZvbnRTaXplTWVhc3VyZW1lbnQsXG59IGZyb20gJy4uLy4uL2dsb2JhbF9zdHlsaW5nJztcbmltcG9ydCB7IEV1aVRpdGxlU2l6ZSB9IGZyb20gJy4vdGl0bGUnO1xuXG4vKipcbiAqIE1peGluXG4gKi9cbnR5cGUgRXVpVGhlbWVUaXRsZSA9IHtcbiAgZm9udFNpemU6IENTU1Byb3BlcnRpZXNbJ2ZvbnRTaXplJ107XG4gIGxpbmVIZWlnaHQ6IENTU1Byb3BlcnRpZXNbJ2xpbmVIZWlnaHQnXTtcbiAgZm9udFdlaWdodDogQ1NTUHJvcGVydGllc1snZm9udFdlaWdodCddO1xuICBjb2xvcjogQ1NTUHJvcGVydGllc1snY29sb3InXTtcbn07XG5cbmV4cG9ydCBjb25zdCBldWlUaXRsZSA9IChcbiAgc2NhbGU6IEV1aVRpdGxlU2l6ZSA9ICdtJyxcbiAgZXVpVGhlbWU6IFVzZUV1aVRoZW1lWydldWlUaGVtZSddLFxuICBtZWFzdXJlbWVudDogX0V1aVRoZW1lRm9udFNpemVNZWFzdXJlbWVudCA9ICdyZW0nXG4pOiBFdWlUaGVtZVRpdGxlID0+IHtcbiAgY29uc3QgdGl0bGVTY2FsZVRvRm9udFNpemVTY2FsZU1hcDoge1xuICAgIFtzaXplIGluIEV1aVRpdGxlU2l6ZV06IF9FdWlUaGVtZUZvbnRTY2FsZTtcbiAgfSA9IHtcbiAgICB4eHhzOiAneHMnLFxuICAgIHh4czogJ3MnLFxuICAgIHhzOiAnbScsXG4gICAgczogJ2wnLFxuICAgIG06ICd4bCcsXG4gICAgbDogJ3h4bCcsXG4gIH07XG5cbiAgcmV0dXJuIHtcbiAgICAuLi5ldWlGb250U2l6ZSh0aXRsZVNjYWxlVG9Gb250U2l6ZVNjYWxlTWFwW3NjYWxlXSwgZXVpVGhlbWUsIG1lYXN1cmVtZW50KSxcbiAgICBmb250V2VpZ2h0OiBldWlUaGVtZS5mb250LndlaWdodFtldWlUaGVtZS5mb250LnRpdGxlLndlaWdodF0sXG4gICAgY29sb3I6IGV1aVRoZW1lLmNvbG9ycy50aXRsZSxcbiAgfTtcbn07XG5cbi8vIEhvb2sgdmVyc2lvblxuZXhwb3J0IGNvbnN0IHVzZUV1aVRpdGxlID0gKFxuICBzY2FsZTogRXVpVGl0bGVTaXplID0gJ20nLFxuICBtZWFzdXJlbWVudDogX0V1aVRoZW1lRm9udFNpemVNZWFzdXJlbWVudCA9ICdyZW0nXG4pOiBFdWlUaGVtZVRpdGxlID0+IHtcbiAgY29uc3QgeyBldWlUaGVtZSB9ID0gdXNlRXVpVGhlbWUoKTtcbiAgcmV0dXJuIGV1aVRpdGxlKHNjYWxlLCBldWlUaGVtZSwgbWVhc3VyZW1lbnQpO1xufTtcblxuLyoqXG4gKiBTdHlsZXNcbiAqL1xuZXhwb3J0IGNvbnN0IGV1aVRpdGxlU3R5bGVzID0gKHsgZXVpVGhlbWUgfTogVXNlRXVpVGhlbWUpID0+ICh7XG4gIGV1aVRpdGxlOiBjc3NgXG4gICAgJHtldWlUZXh0QnJlYWtXb3JkfVxuXG4gICAgJiArICYge1xuICAgICAgbWFyZ2luLXRvcDogJHtldWlUaGVtZS5zaXplLmx9O1xuICAgIH1cbiAgYCxcbiAgdXBwZXJjYXNlOiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYCxcbiAgLy8gU2l6ZXNcbiAgeHh4czogY3NzYFxuICAgICR7ZXVpVGl0bGUoJ3h4eHMnLCBldWlUaGVtZSl9XG4gIGAsXG4gIHh4czogY3NzYFxuICAgICR7ZXVpVGl0bGUoJ3h4cycsIGV1aVRoZW1lKX1cbiAgYCxcbiAgeHM6IGNzc2BcbiAgICAke2V1aVRpdGxlKCd4cycsIGV1aVRoZW1lKX1cbiAgYCxcbiAgczogY3NzYFxuICAgICR7ZXVpVGl0bGUoJ3MnLCBldWlUaGVtZSl9XG4gIGAsXG4gIG06IGNzc2BcbiAgICAke2V1aVRpdGxlKCdtJywgZXVpVGhlbWUpfVxuICBgLFxuICBsOiBjc3NgXG4gICAgJHtldWlUaXRsZSgnbCcsIGV1aVRoZW1lKX1cbiAgYCxcbn0pO1xuIl19 */",
- "name": "1mr6cet-euiTitle-s",
- "next": undefined,
- "styles": ";
- overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
- word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other
- word-break: break-word; // IE doesn't understand but that's ok
- &+&{margin-top:24px;};label:euiTitle;;;;font-size:1.5714rem;line-height:1.7143rem;font-weight:700;color:#1a1c21;;;label:s;;;;",
- "toString": [Function],
- }
- }
- />
-
-
- Hoi
-
-
-
-
-
-
-
- There
-
-
-
-
+ Hoi
+
+
+
+
+ There
+
-
-
+
+
`;
exports[`EuiCard props icon 1`] = `
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index 51f26fc9e84..731293dc709 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -95,7 +95,7 @@ describe('EuiCard', () => {
describe('href', () => {
it('supports href as a link', () => {
- const component = mount(
+ const component = render(
);
diff --git a/src/components/title/title.styles.ts b/src/components/title/title.styles.ts
index 4eb2cefb3e8..b5f206b9f6c 100644
--- a/src/components/title/title.styles.ts
+++ b/src/components/title/title.styles.ts
@@ -64,7 +64,7 @@ export const useEuiTitle = (
*/
export const euiTitleStyles = ({ euiTheme }: UseEuiTheme) => ({
euiTitle: css`
- ${euiTextBreakWord}
+ ${euiTextBreakWord()}
& + & {
margin-top: ${euiTheme.size.l};
diff --git a/src/global_styling/functions/typography.ts b/src/global_styling/functions/typography.ts
index 5f07a0c4408..7b04b734d26 100644
--- a/src/global_styling/functions/typography.ts
+++ b/src/global_styling/functions/typography.ts
@@ -9,6 +9,7 @@
import {
_EuiThemeFontScale,
_EuiThemeFontSizeMeasurement,
+ _EuiThemeFontWeights,
} from '../variables/typography';
import { UseEuiTheme } from '../../services/theme/hooks';
@@ -75,3 +76,26 @@ export function euiLineHeightFromBaseline(
? `${pixelValue}px`
: `${(pixelValue / denominator).toFixed(4)}rem`;
}
+
+/**
+ * Text weight shifting
+ *
+ * When changing the font-weight based on the state of the component,
+ * this mixin will ensure that the sizing is dependent on the boldest
+ * weight so it doesn't shift sibling content.
+ */
+export const euiTextShift = (
+ fontWeight: keyof _EuiThemeFontWeights = 'bold',
+ attribute: string = 'data-text',
+ euiTheme: UseEuiTheme['euiTheme']
+) => {
+ return `
+ &::after {
+ display: block;
+ content: attr(${attribute});
+ font-weight: ${euiTheme.font.weight[fontWeight]};
+ height: 0;
+ overflow: hidden;
+ visibility: hidden;
+ }`;
+};
diff --git a/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap b/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap
new file mode 100644
index 00000000000..b6a4d45d616
--- /dev/null
+++ b/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em l 1`] = `
+Object {
+ "fontSize": "1.375em",
+ "lineHeight": "1.2495",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em m 1`] = `
+Object {
+ "fontSize": "1em",
+ "lineHeight": "1.5000",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em s 1`] = `
+Object {
+ "fontSize": "0.875em",
+ "lineHeight": "1.5000",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em xl 1`] = `
+Object {
+ "fontSize": "1.6875em",
+ "lineHeight": "1.2495",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em xs 1`] = `
+Object {
+ "fontSize": "0.75em",
+ "lineHeight": "1.5000",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em xxl 1`] = `
+Object {
+ "fontSize": "2.125em",
+ "lineHeight": "1.2495",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em xxs 1`] = `
+Object {
+ "fontSize": "0.6875em",
+ "lineHeight": "1.5000",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale em xxxs 1`] = `
+Object {
+ "fontSize": "0.5625em",
+ "lineHeight": "1.5000",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px l 1`] = `
+Object {
+ "fontSize": "22px",
+ "lineHeight": "24px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px m 1`] = `
+Object {
+ "fontSize": "16px",
+ "lineHeight": "24px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px s 1`] = `
+Object {
+ "fontSize": "14px",
+ "lineHeight": "20px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px xl 1`] = `
+Object {
+ "fontSize": "27px",
+ "lineHeight": "32px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px xs 1`] = `
+Object {
+ "fontSize": "12px",
+ "lineHeight": "16px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px xxl 1`] = `
+Object {
+ "fontSize": "34px",
+ "lineHeight": "40px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px xxs 1`] = `
+Object {
+ "fontSize": "11px",
+ "lineHeight": "16px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale px xxxs 1`] = `
+Object {
+ "fontSize": "9px",
+ "lineHeight": "12px",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem l 1`] = `
+Object {
+ "fontSize": "1.5714rem",
+ "lineHeight": "1.7143rem",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem m 1`] = `
+Object {
+ "fontSize": "1.1429rem",
+ "lineHeight": "1.7143rem",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem s 1`] = `
+Object {
+ "fontSize": "1.0000rem",
+ "lineHeight": "1.4286rem",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem xl 1`] = `
+Object {
+ "fontSize": "1.9286rem",
+ "lineHeight": "2.2857rem",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem xs 1`] = `
+Object {
+ "fontSize": "0.8571rem",
+ "lineHeight": "1.1429rem",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem xxl 1`] = `
+Object {
+ "fontSize": "2.4286rem",
+ "lineHeight": "2.8571rem",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem xxs 1`] = `
+Object {
+ "fontSize": "0.7857rem",
+ "lineHeight": "1.1429rem",
+}
+`;
+
+exports[`euiFontSize returns an object of font-size and line-height for each scale rem xxxs 1`] = `
+Object {
+ "fontSize": "0.6429rem",
+ "lineHeight": "0.8571rem",
+}
+`;
+
+exports[`euiNumberFormat returns a string of CSS text 1`] = `
+"
+ font-feature-settings: 'calt' 1, 'kern' 1, 'liga' 1, 'tnum' 1;
+"
+`;
+
+exports[`euiTextBreakWord returns a string of CSS text 1`] = `
+"
+ overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
+ word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other
+ word-break: break-word; // IE doesn't understand but that's ok
+"
+`;
+
+exports[`euiTextTruncate allows customizing max-width 1`] = `
+"
+ max-width: 150px; // Ensure that the node has a maximum width after which truncation can occur
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+"
+`;
+
+exports[`euiTextTruncate returns a string of CSS text 1`] = `
+"
+ max-width: 100%; // Ensure that the node has a maximum width after which truncation can occur
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+"
+`;
diff --git a/src/global_styling/mixins/_typography.test.ts b/src/global_styling/mixins/_typography.test.ts
new file mode 100644
index 00000000000..26284d1d95f
--- /dev/null
+++ b/src/global_styling/mixins/_typography.test.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { testCustomHook } from '../../test/internal';
+
+import {
+ EuiThemeFontScales,
+ EuiThemeFontSizeMeasurements,
+} from '../variables/typography';
+import {
+ useEuiFontSize,
+ euiTextBreakWord,
+ euiTextTruncate,
+ useEuiNumberFormat,
+} from './_typography';
+
+describe('euiFontSize', () => {
+ describe('returns an object of font-size and line-height for each scale', () => {
+ EuiThemeFontSizeMeasurements.forEach((measure) => {
+ describe(measure, () => {
+ EuiThemeFontScales.forEach((size) => {
+ test(size, () => {
+ expect(
+ testCustomHook(() => useEuiFontSize(size, measure)).return
+ ).toMatchSnapshot();
+ });
+ });
+ });
+ });
+ });
+});
+
+describe('euiTextBreakWord', () => {
+ it('returns a string of CSS text', () => {
+ expect(euiTextBreakWord()).toMatchSnapshot();
+ });
+});
+
+describe('euiTextTruncate', () => {
+ it('returns a string of CSS text', () => {
+ expect(euiTextTruncate()).toMatchSnapshot();
+ });
+
+ it('allows customizing max-width', () => {
+ expect(euiTextTruncate('150px')).toMatchSnapshot();
+ });
+});
+
+describe('euiNumberFormat', () => {
+ it('returns a string of CSS text', () => {
+ expect(testCustomHook(() => useEuiNumberFormat()).return).toMatchSnapshot();
+ });
+});
diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts
index 07322cacfd4..119cab9ae1a 100644
--- a/src/global_styling/mixins/_typography.ts
+++ b/src/global_styling/mixins/_typography.ts
@@ -46,12 +46,35 @@ export const useEuiFontSize = (
};
/**
- * Text utilities
+ * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
+ * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
*/
-
-// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
-export const euiTextBreakWord = `
+export const euiTextBreakWord = () => `
overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other
word-break: break-word; // IE doesn't understand but that's ok
`;
+
+/**
+ * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
+ */
+export const euiTextTruncate = (
+ maxWidth: CSSProperties['maxWidth'] = '100%'
+) => `
+ max-width: ${maxWidth}; // Ensure that the node has a maximum width after which truncation can occur
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+`;
+
+/**
+ * Fixed-width numbers for tabular data
+ */
+export const euiNumberFormat = (euiTheme: UseEuiTheme['euiTheme']) => `
+ font-feature-settings: ${euiTheme.font.featureSettings}, 'tnum' 1;
+`;
+// Hook version
+export const useEuiNumberFormat = (): string => {
+ const { euiTheme } = useEuiTheme();
+ return euiNumberFormat(euiTheme);
+};
diff --git a/upcoming_changelogs/5854.md b/upcoming_changelogs/5854.md
new file mode 100644
index 00000000000..6a1efbfbb64
--- /dev/null
+++ b/upcoming_changelogs/5854.md
@@ -0,0 +1 @@
+- Added `euiTextTruncate`, `euiTextWordBreak`, and `euiNumberFormat` CSS-in-JS text utilities