截断

此功能仍处于实验阶段。“实验性”意味着这是一个早期的实施,可能会发生重大的突破性变化。

截断是修剪文本内容的排版原语。对于几乎所有情况,建议文本,标题,或副标题用于呈现文本内容。然而,截断可用于自定义实现。

用法

从“@wordpress/components”导入{__terialTruncate作为Truncate};函数Example(){返回(<截断>Lorem ipsum悲哀坐在amet,奉献敬爱的精英。Nunc ex公司neque,vulputate a diamet,luctus convallis lacus。前庭acmollis mi.Morbi id elementum massa.莫尔比·伊德·马萨。</截断>);}

道具

子级:ReactNode

子元素。

注意:只有在儿童属于以下类型之一一串。在任何其他情况下,组件都不会尝试截断文本,并将通过儿童.

  • 必需:是

省略号:字符串

截断文本时的省略号字符串限制道具的价值。

  • 必需:否
  • 违约:

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

确定截断位置。例如,我们可以在中间截断文本。为此,我们需要设置省略号模式中间的和一段文字限制.

  • 汽车:在末尾自动剪裁内容,不需要限制.
  • :修剪开头的内容。需要一个限制.
  • 中间的:修剪中间的内容。需要一个限制.
  • :在末尾修剪内容。需要一个限制.

  • 必需:否

  • 违约:汽车

限制:数字

确定在截断其余文本之前要显示的最大字符数。要求省略号模式假设值不同于汽车没有人.

  • 必需:否
  • 违约:0

numberOfLines:数字

将文本内容固定到指定的行数,在末尾添加省略号。注意:此功能忽略省略道具,并始终显示默认值省略号。

  • 必需:否
  • 违约:0
从“@wordpress/components”导入{__terialTruncate作为Truncate};函数Example(){返回(<截断numberOfLines={2}>北风与大海相遇的地方,是一条充满记忆的河流。睡吧,亲爱的,安然无恙,因为在这条河里,一切都能找到。在她深邃而真实的水中,为你找到了答案和道路。深入她的声音,但不要太深,否则你会被淹死的</截断>);}