Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

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