此功能仍处于实验阶段。“实验性”意味着这是早期实现,可能会发生剧烈且破坏性的更改。

Truncate 是一个排版原语,用于截断文本内容。在几乎所有情况下,建议使用 Text、Heading 或 Subheading 来渲染文本内容。但是,Truncate 也可用于自定义实现。

用法

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

属性

children: ReactNode

子元素。

注意:仅当 children 类型为 string 或 number 时,才会尝试截断文本。在其他任何情况下,组件将不会尝试截断文本,而是直接透传 children。

  • 必需:是

ellipsis: string

根据 limit 属性的值截断文本时显示的省略号字符串。

  • 必需:否
  • 默认:…

ellipsizeMode: ‘auto’ | ‘head’ | ‘tail’ | ‘middle’ | ‘none’

确定截断的位置。例如,我们可以在文本中间进行截断。为此,我们需要将 ellipsizeMode 设置为 middle 并设置文本 limit。

  • auto:在没有 limit 的情况下自动在末尾修剪内容。
  • head:在开头修剪内容。需要 limit。
  • middle:在中间修剪内容。需要 limit。
  • tail:在末尾修剪内容。需要 limit。
  • 必需:否

  • 默认:auto

limit: number

确定在其余文本被截断之前显示的最大字符数。需要 ellipsizeMode 取不同于 auto 和 none 的值。

  • 必需:否
  • 默认:0

numberOfLines: number

将文本内容限制为指定的 numberOfLines,并在末尾添加省略号。注意:此功能会忽略 ellipsis 属性的值,始终显示默认的 … 省略号。

  • 必需:否
  • 默认: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>
    );
}