Ellipsis 文本省略
用于长文本的自动省略,支持单行/多行截断,溢出时悬停展示全文 tooltip,也可展开/收起。
单行省略
单行省略
在容器上约束宽度即可触发省略;无溢出时渲染纯文本(不挂任何浮层)。
多行省略
多行省略(rows)
rows="2" 起走 -webkit-line-clamp,多行省略时 tooltip 展示全文。
展开 / 收起
展开 / 收起
expandable 仅在文本实际溢出时显示按钮;展开后不再省略,oas-expand / oas-collapse 事件可追踪状态。
关闭 tooltip
关闭 tooltip
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
expandable | 溢出时显示「展开/收起」按钮 | boolean | — |
rows | 显示行数(1 为单行省略,≥2 多行 -webkit-line-clamp) | string | 1 |
text | 文本内容 | string | — |
tooltip | 溢出时悬停展示全文 tooltip | string | true |
事件
| 事件 | 说明 |
|---|---|
oas-collapse | 收起,detail: { expanded: false } |
oas-expand | 展开,detail: { expanded: true } |
仅文本实际溢出时才会挂载 tooltip / 展开按钮;无溢出时纯文本,断开连接即销毁,零孤儿浮层。