import { Truncate } from "@twilio-labs/match/components";
const Component = () => (
<p style={{ width: "200px" }}>
<Truncate>Any text that is past 200px will get truncated</Truncate>


About Truncate

The truncate component hides text that extends past the set width of the parent container. An ellipsis is added to the end of the shortened text to indicate that the text is shortened. The truncate component is useful for long links, breadcrumbs, and sections where there is an option to read more (i.e. a blog thumbnail).


To truncate a string, wrap the string in the truncate component and wrap the truncate component in a parent with a set width.

  • Truncate a long url or long breadcrumb
  • Have a "read more" button when long text is truncated
  • Do not truncate headings, titles, warnings, or other important information
  • Do not truncate text without an option to see all the rest of the text


Consider how truncating the text might affect readability of the content. Additionally, consider placing the full text in a title attribute so that it’s accessible on hover.


Text Sample

The truncate component can be used to give a sample of text.

Long url