Truncate

Use Truncate to shorten overflowing text with an ellipsis.

Page navigation navigation

React

readyNot reviewed for a11y

Rails

readyNot reviewed for a11y

Some example text

<Truncate title="Some example text">Some example text</Truncate>

<Truncate title="Some example text">Some example text</Truncate>

Some example text

<Box sx={{maxWidth: '125px', width: '100%'}}>
  <Truncate title="Some example text" maxWidth="100%">
    Some example text
  </Truncate>
</Box>

<Box sx={{maxWidth: '125px', width: '100%'}}>
  <Truncate title="Some example text" maxWidth="100%">
    Some example text
  </Truncate>
</Box>

Some example text

<Truncate title="Hover this example text" maxWidth="10ch">
  Some example text
</Truncate>

<Truncate title="Hover this example text" maxWidth="10ch">
  Some example text
</Truncate>

Hover this example text

<Truncate title="Hover this example text" expandable>
  Hover this example text
</Truncate>

<Truncate title="Hover this example text" expandable>
  Hover this example text
</Truncate>

Name	Required	Description
maxWidth		`number` Sets the max-width of the text.
inline		`boolean` Displays text as inline block and vertical aligns to the top.
expandable		`boolean` Allows the truncated text to be displayed on hover.
as		`React.ElementType`
sx		`SystemStyleObject`