Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

Truncate

Version 14.1.1GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/truncate - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Truncate} from '@twilio-paste/core/truncate';

const Component: React.FC = () => {
  return (
    <Box maxWidth="size20">
      <Text as="p">
        <Truncate title="Some very long text to truncate">Some very long text to truncate</Truncate>
      </Text>
    </Box>
  );
};

Props

Props page anchor

Truncate

Truncate page anchor

title RequiredRequired

An accessible label that should match the content of the truncated text. Allows users to see the truncated content.

Type
string

as

Controls the HTML element that that will be rendered in the DOM.

Type
keyof IntrinsicElements

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.