On this page

Truncate

Use truncate to shorten overflowing text with an ellipsis.
  • Alpha
  • Not reviewed for accessibility
On this page
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here.

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.

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

Custom max-width

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

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

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

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

Props

Truncate

NameTypeDefaultDescription
maxWidth
number
125

Sets the max-width of the text.

inline
boolean
false

Displays text as inline block and vertical aligns to the top.

expandable
boolean
false

Allows 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