Truncate
The Truncate component can be used to shorten a string of text that overflows a defined area.
- Status
- production
- Version
- 6.0.2
- Import from
@twilio-paste/core/truncate— or —@twilio-paste/truncate
Guidelines#
About Truncate#
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
Truncation should NOT be used on page headers, titles, labels, error messages, validation messages, notifications, or SIDs.
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#
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.
Examples#
Basic Truncate#
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.
Black Lives Matter. We stand with the Black community.
Truncate URL#
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
Usage Guide#
API#
Installation#
yarn add @twilio-paste/truncate - or - yarn add @twilio-paste/coreUsage#
import {Truncate} from '@twilio-paste/truncate';const Component: React.FC = () => { return ( <Box maxWidth="size20"> <Text as="p"> <Truncate>Some very long text to truncate</Truncate> </Text> </Box> );};Props#
| Prop | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | null |