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
| Name | Type | Default | Description |
|---|---|---|---|
| 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 | Style overrides to apply to the component. See also overriding styles. |