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.

Examples

Default

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>

<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

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>

<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

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>

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

Expandable

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>

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

Props

Truncate

Name	Type	Default	Description
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.
as	React.ElementType	'div'	The underlying element to render — either a HTML element name or a React component.
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Edit this page on GitHub

1 contributor

Last edited by colebemis on January 24, 2023