此功能仍处于实验阶段。“实验性”意味着这是早期实现,可能会发生剧烈且破坏性的更改。
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>
);
}