Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Truncate

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

Version 14.1.1
Github
Storybook

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