Truncate
Use truncate to shorten overflowing text with an ellipsis.
- Alpha
- Not reviewed for accessibility
The Truncate component will shorten text with an ellipsis. Always add a title attribute to the truncated element so the full text remains accessible.
Truncate will prevent text that overflows from wrapping. The default max-width is 125px.
You can override the maximum width of the truncated text with the maxWidth prop.
You can use the inline boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).
You can use the expandable boolean prop to display the truncated text on hover.
| 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 |