Truncate

Use Truncate to shorten overflowing text with an ellipsis.

Page navigation navigation

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>

Loading data for truncate...