---
name: Truncate
package: '@wordpress/components'
category: '@wordpress-components'
status: stable
canonical: 'https://system.automattic.design/components/truncate/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-truncate--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/truncate'
---

# 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.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ellipsis` | `string` | `'…'` | The ellipsis string when truncating the text by the `limit` prop's value. |
| `ellipsizeMode` | `"head" \| "none" \| "auto" \| "middle" \| "tail"` | `'auto'` | 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`.<br>* `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`. |
| `limit` | `number` | `0` | 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`. |
| `numberOfLines` | `number` | `0` | 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.<br>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` | `JSXElementConstructor<any> \| keyof IntrinsicElements \| undefined` | — | The HTML element or React component to render the component as. |


## Examples

### Default

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

### Truncate by character count

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