Code

Usage

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

Guidelines

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

Composition

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

Do
  • Truncate a long url or long breadcrumb
  • Have a "read more" button when long text is truncated
Don't
  • 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

Accessibility

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.


Examples

Text Sample

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

Margaret Hamilton

Margaret Hamilton is credited with coining the term ‘software engineering'

Long url