Skip to content
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.
Default example
Truncate will prevent text that overflows from wrapping. The default max-width is 125px.
Custom max-width example
You can override the maximum width of the truncated text with the maxWidth prop.
Inline example
You can use the inline boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).
Expandable example
You can use the expandable boolean prop to display the truncated text on hover.
Component props
| Name | Type | Default | Description |
|---|---|---|---|
| as | String | div | Sets the HTML tag for the component |
| 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 |
| sx | SystemStyleObject | {} | Style to be applied to the component |
Edit this page on GitHub
5 contributors
Last edited by colebemis on December 16, 2021