Skip to content

Ellipsis 文本省略

用于长文本的自动省略,支持单行/多行截断,溢出时悬停展示全文 tooltip,也可展开/收起。

单行省略

单行省略

在容器上约束宽度即可触发省略;无溢出时渲染纯文本(不挂任何浮层)。

多行省略

多行省略(rows)

rows="2" 起走 -webkit-line-clamp,多行省略时 tooltip 展示全文。

展开 / 收起

展开 / 收起

expandable 仅在文本实际溢出时显示按钮;展开后不再省略,oas-expand / oas-collapse 事件可追踪状态。

关闭 tooltip

关闭 tooltip

API

属性

属性说明类型默认值
expandable溢出时显示「展开/收起」按钮boolean
rows显示行数(1 为单行省略,≥2 多行 -webkit-line-clampstring1
text文本内容string
tooltip溢出时悬停展示全文 tooltipstringtrue

事件

事件说明
oas-collapse收起,detail: { expanded: false }
oas-expand展开,detail: { expanded: true }

仅文本实际溢出时才会挂载 tooltip / 展开按钮;无溢出时纯文本,断开连接即销毁,零孤儿浮层。