Truncate

Use Truncate to shorten overflowing text with an ellipsis.

Page navigation navigation

React

ready

Rails

ready

Some example text

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

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

Some example text

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

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

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	Default	Description
maxWidth	`125`	`number` Sets the max-width of the text.
inline	`false`	`boolean` Displays text as inline block and vertical aligns to the top.
expandable	`false`	`boolean` Allows the truncated text to be displayed on hover.
as	`'div'`	`React.ElementType`
sx Deprecated		`SystemStyleObject`