云策 WordPress 开发者社区

块编辑器开发文档

Truncate

查看官方原文 ↗
💡 云策文档标注

概述

Truncate 是一个实验性的 WordPress 组件，用于文本截断处理，适用于自定义实现场景。文档介绍了其基本用法、Props 配置及注意事项。

关键要点

  • Truncate 是实验性功能，可能发生重大变更，建议优先使用 Text、Heading 或 Subheading 组件渲染文本。
  • 组件仅对字符串或数字类型的子元素进行截断，其他类型子元素会直接透传。
  • 支持多种截断模式（ellipsizeMode），如 auto、head、tail、middle，并可设置字符限制（limit）或行数限制（numberOfLines）。

代码示例

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

function Example() {
    return (
        <Truncate>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
            neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
            mollis mi. Morbi id elementum massa.
        </Truncate>
    );
}
import { __experimentalTruncate as Truncate } from '@wordpress/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>
    );
}

注意事项

  • ellipsizeMode 为 auto 或 none 时，limit 属性无效；其他模式需配合 limit 使用。
  • numberOfLines 属性会忽略 ellipsis 自定义值，始终使用默认省略号（…）。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

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

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

function Example() {
    return (
        <Truncate>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
            neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
            mollis mi. Morbi id elementum massa.
        </Truncate>
    );
}

Props

children: 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.

  • Required: Yes

ellipsis: string

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

  • Required: No
  • Default: …

ellipsizeMode: 'auto' | 'head' | 'tail' | 'middle' | 'none'

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.

  • Required: No

  • Default: auto

limit: 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.

  • Required: No
  • Default: 0

numberOfLines: 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.

  • Required: No
  • Default: 0
import { __experimentalTruncate as Truncate } from '@wordpress/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>
    );
}