开发预览更新于 2026-05-10

TextEllipsis 多行省略

多行文本溢出时显示省略号，可选「展开 / 收起」按钮控制展示长度。

基础用法

基于 CSS -webkit-line-clamp。expandable 时通过 ResizeObserver 检测溢出，仅在确实溢出时才显示「展开」按钮。

这是一段较长的文字示例，用来演示多行省略与展开/收起的效果。当内容超出指定行数时会显示省略号，展开按钮把所有内容呈现出来；再次点击则收起。这段文字本身被故意写得长一些以触发溢出。

<CfTextEllipsis :text="long" :rows="2" expandable />

<CfTextEllipsis text={long} rows={2} expandable />