Text ellipsis
Multi-line text truncation with ellipsis and an optional Expand / Collapse toggle.
Basic usage
Built on CSS -webkit-line-clamp. With expandable, a ResizeObserver detects overflow and only renders the “Expand” button when the text actually overflows.
这是一段较长的文字示例，用来演示多行省略与展开/收起的效果。当内容超出指定行数时会显示省略号，展开按钮把所有内容呈现出来；再次点击则收起。这段文字本身被故意写得长一些以触发溢出。
<CfTextEllipsis :text="long" :rows="2" expandable /><CfTextEllipsis text={long} rows={2} expandable />API
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | Text content (slot/children also supported) |
rows | number | 2 | Maximum rows when collapsed |
expandable | boolean | false | Show Expand / Collapse button |
expandText | string | 'Expand' | Expand button label |
collapseText | string | 'Collapse' | Collapse button label |
反馈与讨论
Text ellipsis · Discussion