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>
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()} `
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>