Truncate

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.

<Truncate title="Some text with a branch-name-that-is-really-long">
  Some text with a branch-name-that-is-really-long
</Truncate>

Custom max-width example

You can override the maximum width of the truncated text with the maxWidth prop.

<Truncate maxWidth={250} title="Some text with a branch-name-that-is-really-long">
  Some text with a branch-name-that-is-really-long
</Truncate>

Inline example

You can use the inline boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).

<Truncate as="strong" inline title="branch-name-that-is-really-long">
  Some text with a branch-name-that-is-really-long
</Truncate>

Expandable example

You can use the expandable boolean prop to display the truncated text on hover.

<Truncate expandable title="Some text with a branch-name-that-is-really-long">
  Some text with a branch-name-that-is-really-long
</Truncate>

Component props

Edit this page on GitHub

5 contributors

Last edited by colebemis on December 16, 2021