Ellipsis 文本省略

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

单行省略

单行省略

示例代码

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

多行省略

多行省略（rows）

示例代码

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

展开 / 收起

展开 / 收起

示例代码

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

省略方向（direction）

start：省略头部，保留尾部

长路径/文件名场景：头部被省略号截断，末尾文件名完整保留（`direction: rtl` + `unicode-bidi: plaintext` 纯 CSS 实现）。

示例代码

middle：保留首尾，中部省略

哈希/交易 ID 场景：首尾保留可辨认，中部以省略号压缩；悬停可查看完整内容。

示例代码

direction 取值：tail（默认，尾部省略）/ start（头部省略）/ middle（中部省略，仅单行生效，rows≥2 时忽略）。

关闭 tooltip

关闭 tooltip

示例代码

API

属性

属性	说明	类型	默认值
direction	省略方向：end（默认尾部）/ start（头部）/ middle（中部保留首尾，长路径/哈希场景）	string	tail
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 / 展开按钮；无溢出时纯文本，断开连接即销毁，零孤儿浮层。