Truncate

<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>

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.

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.

<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>

<Box maxWidth="size30">
  <Anchor href="/introduction/about-paste">
    <Truncate title="Learn more about Paste">https://paste.twilio.design/introduction/about-paste</Truncate>
  </Anchor>
</Box>