Truncate Edit

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.

Usage

“`jsx live
import { Truncate } from ‘@wp-g2/components’;

function Example() {
return (

Where the north wind meets the sea, there’s a river full of memory.
Sleep, my darling, safe and sound, for in this river all is found.
In her waters, deep and true, lay the answers and a path for you.
Dive down deep into her sound, but not too far or you’ll be drowned

);
}

<br />## Props

##### ellipsis

**Type**: `string`

The ellipsis string when `truncate` is set.

##### ellipsizeMode

**Type**: `"auto"`,`"head"`,`"tail"`,`"middle"`

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

##### limit

**Type**: `number`

Determines the max characters when `truncate` is set.

##### numberOfLines

**Type**: `number`

Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.

```jsx live
import { Truncate } from '@wp-g2/components';

function Example() {
    return (
        <Truncate numberOfLines={2}>
            Where the north wind meets the sea, there's a river full of memory.
            Sleep, my darling, safe and sound, for in this river all is found.
            In her waters, deep and true, lay the answers and a path for you.
            Dive down deep into her sound, but not too far or you'll be drowned
        </Truncate>
    );
}