Automattic Design System

Components

Truncate

Truncate is a typography primitive that trims text content. For almost all cases, it is recommended that Text, Heading, or Subheading is used to render text content. However,Truncate is available for custom implementations.

import { __experimentalTruncate as Truncate } from '@wordpress/components';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
ellipsis'…'

string

The ellipsis string when truncating the text by the limit prop’s value.

ellipsizeMode'auto'

"head" | "none" | "middle" | "auto" | "tail"

Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set ellipsizeMode to middle and a text limit.

  • auto: Trims content at the end automatically without a limit.
  • head: Trims content at the beginning. Requires a limit.
  • middle: Trims content in the middle. Requires a limit.
  • tail: Trims content at the end. Requires a limit.
limit0

number

Determines the max number of characters to be displayed before the rest of the text gets truncated. Requires ellipsizeMode to assume values different from auto and none.

numberOfLines0

number

Clamps the text content to the specified numberOfLines, adding an ellipsis at the end. Note: this feature ignores the value of the ellipsis prop and always displays the default … ellipsis.

children Required

ReactNode

The children elements.

Note: text truncation will be attempted only if the children are either of type string or number. In any other scenarios, the component will not attempt to truncate the text, and will pass through the children.

as

keyof IntrinsicElements | JSXElementConstructor<any> | undefined

The HTML element or React component to render the component as.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => {
    return <Truncate numberOfLines={2}>{defaultText}</Truncate>;
};

Truncate by character countPermalink to this section

const CharacterCount = () => {
    return <Truncate limit={23} ellipsizeMode="tail" ellipsis="[---]">{defaultText}</Truncate>;
};