Skip to content
On this page

Truncate

Use truncate to shorten overflowing text with an ellipsis.
  • Alpha
  • Not reviewed for accessibility
On this page

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

Examples

Default

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

Custom max-width

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

Inline

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

Expandable

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

Props

Truncate

NameTypeDefaultDescription
maxWidth
number
125Sets the max-width of the text.
inline
boolean
falseDisplays text as inline block and vertical aligns to the top.
expandable
boolean
falseAllows the truncated text to be displayed on hover.
as
React.ElementType
'div'The underlying element to render — either a HTML element name or a React component.
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.