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

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