Skip to contentSkip to navigationSkip to topbar
Figma
Star

Truncate

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

Version 14.1.1
Github

Installation

Installation page anchor
yarn add @twilio-paste/truncate - or - yarn add @twilio-paste/core
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>
  );
};

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