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> ); }