Skip to content

Truncate

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.

Some text with a branch-name-that-is-really-long

Custom max-width example

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

Some text with a branch-name-that-is-really-long

Inline example

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

Some text with a branch-name-that-is-really-long

Expandable example

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

Some text with a branch-name-that-is-really-long

System props

System props are deprecated in all components except Box. Please use the sx prop instead.

Truncate components get TYPOGRAPHY and COMMON system props. Read our System Props doc page for a full list of available props.

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
Edit this page on GitHub
2 contributorsVanAndersonalanbsmith
Last edited by VanAnderson on July 22, 2021