Typography utilities

Alignment

.eui-textLeft className

Changes the element’s text alignment to the left/starting side of its container.

Left align text

✄𐘗
tsx code block:
✄𐘗<div className="eui-textLeft">
  /* Your content */
</div>

.eui-textCenter className

Changes the element’s text alignment to the center of its container.

Center align text

✄𐘗
tsx code block:
✄𐘗<div className="eui-textCenter">
  /* Your content */
</div>

.eui-textRight className

Changes the element’s text alignment to the right/ending side of its container.

Right align text

✄𐘗
tsx code block:
✄𐘗<div className="eui-textRight">
  /* Your content */
</div>

Wrapping

euiTextTruncate(maxWidth?) function

Truncates text at 100% width of its parent and will display an ellipsis.

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%;.

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.

This text will not to wrap but truncate beyond the boundaries of the yellow box.

✄𐘗
tsx code block:
✄𐘗css`
  ${euiTextTruncate()}
`

.eui-textTruncate className

Applies the euiTextTruncate() styles as an overriding CSS utility class.

This text will not to wrap but truncate beyond the boundaries of the yellow box.

✄𐘗
tsx code block:
✄𐘗<div
  className="eui-textTruncate"
  title="Your content">
  /* Your content */
</div>

euiTextBreakWord() function

Wraps the text across lines like normal, but forces long words like URLs to break.

This text will wrap like normal but this long link http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool will break mid-word.

✄𐘗
tsx code block:
✄𐘗css`
  ${euiTextBreakWord()}
`

.eui-textBreakWord className

Applies the euiTextBreakWord() styles as an overriding CSS utility class.

This text will wrap like normal but this long link http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool will break mid-word.

✄𐘗
tsx code block:
✄𐘗<div className="eui-textBreakWord">
  /* Your content */
</div>

.eui-textNoWrap className

Forces text not to wrap even in small containers.

This text will not wrap and will overflow the boundaries of the yellow box.

✄𐘗
tsx code block:
✄𐘗<div className="eui-textNoWrap">
  /* Your content */
</div>

.eui-textBreakAll className

Wraps the text across lines always forcing the last word on the line to break.

This text block will wrap, breaking up anything including long URLs http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool and run on strings like this --------------------------------------------------------------------------.

✄𐘗
tsx code block:
✄𐘗<div className="eui-textBreakAll">
  /* Your content */
</div>

.eui-textBreakNormal className

Reverts the text back to the normal wrapping scheme of not forcing word breaks.

This text block will wrap normally, but will not break long URLs http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool but may break run on strings like this ---------------------------------------------------------------.

✄𐘗
tsx code block:
✄𐘗<div className="eui-textBreakNormal">
  /* Your content */
</div>

Numbers

euiNumberFormat(euiTheme) function

Applies font-feature-settings: "tnum"; so that numbers align more properly in a column, especially when right aligned.

Without function
11317.11
0040.900

With function
11317.11
0040.900

✄𐘗
tsx code block:
✄𐘗css`
  ${euiNumberFormat(useEuiTheme())}
`

.eui-textNumber className

Applies the euiNumberFormat() styles as an overriding CSS utility class.

Without class
11317.11
0040.900

With class
11317.11
0040.900

✄𐘗
tsx code block:
✄𐘗<div className="eui-textNumber">
  /* Your number content */
</div>

Color

.eui-textInheritColor className

Forces the component to inherit its text color from its parent.

For changing the color of your text to on of the named colors, use EuiText or EuiTextColor.

I am code that matches the EuiTextColor

✄𐘗
tsx code block:
✄𐘗<EuiTextColor color="danger">
  <EuiCode className="eui-textInheritColor">I am danger code</EuiCode>
</EuiTextColor>