Skip to contentSkip to navigationSkip to topbar
Figma
Star

Truncate

Version 14.1.1GithubStorybook

Truncate is a wrapper that shortens a string of text that overflows a defined area.

Component preview theme
<Box maxWidth="size30">
<Text as="p">
<Truncate title="Black Lives Matter. We stand with the Black community.">Black Lives Matter. We stand with the Black community.</Truncate>
</Text>
</Box>

Guidelines

Guidelines page anchor

About Truncate

About Truncate page anchor

Truncation, or shortening, is typically used for text or links that exceed the size of their container. The Truncate component does all of the heavy lifting for you. You'll need to wrap the long text with Truncate, and wrap the Truncate component with an element with a set width. This will cut off the text based on the parent container's width, and append an ellipsis (...) at the end.

Good use cases for truncation include:

  • Breadcrumbs
  • Long URL links
  • Long friendly names

Truncation should generally not be used for page titles, labels, error messages, validation messages, notifications, or SIDs. A notable exception is when a long friendly name is used as a page title.

Truncation can only happen on single lines of text and will never work on multiple lines. If you're looking for multiline truncation, that will need to be controlled with JavaScript.

Accessibility

Accessibility page anchor

By default, Truncate has no accessibility concerns. While using Truncate, it is up to you to manage the resulting accessibility implications. You may want to consider how Truncate affects readability since it will visually hide information on your page.

Truncate must be used in a container with a set width. Without this container Truncate will have no effect since it spans the full width of a container.

Component preview theme
<Box maxWidth="size30">
<Text as="p">
<Truncate title="Black Lives Matter. We stand with the Black community.">Black Lives Matter. We stand with the Black community.</Truncate>
</Text>
</Box>
Component preview theme
<Box maxWidth="size30">
<Anchor href="/introduction/about-paste">
<Truncate title="Learn more about Paste">https://paste.twilio.design/introduction/about-paste</Truncate>
</Anchor>
</Box>

Some very long text to truncate

Do

Use Truncate to shorten text that doesn't fit in its parent container.

Don't

Don’t use Truncate to shorten page headings, titles, labels, error messages, validation messages, or notifications. One exception is when a long friendly name is used as a page title.