Skip to content

Truncate

  • Alpha
  • Review pending by accessibility team

The Truncate component will shorten text with an ellipsis. Always add a title attribute to the truncated element so the full text remains accessible.

Default example

Truncate will prevent text that overflows from wrapping. The default max-width is 125px.

Custom max-width example

You can override the maximum width of the truncated text with the maxWidth prop.

Inline example

You can use the inline boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).

Expandable example

You can use the expandable boolean prop to display the truncated text on hover.

Component props

NameTypeDefaultDescription
asStringdivSets the HTML tag for the component
maxWidthNumber125Sets the max-width of the text
inlineBooleanfalsedisplays text as inline block and vertical aligns to the top
expandableBooleanfalseallows the truncated text to be displayed on hover
sxSystemStyleObject{}Style to be applied to the component