Ellipsis 文本省略

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

单行省略

单行省略

示例代码

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

多行省略

多行省略（lines / rows）

示例代码

rows="2" 起走 -webkit-line-clamp，多行省略时 tooltip 展示全文。lines 与 rows 等价（同义别名，两者同时存在时 lines 优先），新代码建议用 lines。

展开 / 收起

展开 / 收起（行内链接形态）

示例代码

expandable 仅在文本实际溢出时显示「展开/收起」链接（行内形态，同行尾随）；展开后不再省略，oas-expand / oas-collapse 事件可追踪状态。

自定义展开 / 收起文案

expand-text / collapse-text

示例代码

expand-text / collapse-text 属性覆盖 locale 缺省的「展开 / 收起」文案。

受控展开（expanded）

受控 expanded（属性驱动）

外部切换展开

点击按钮或文本内链接切换展开态。

示例代码

expanded 属性在场即展开（宿主强制），缺席则由内部状态驱动；内部切换会反射回属性，宿主增删属性同样驱动开合。

溢出状态事件（oas-overflow）

oas-overflow 监听溢出变化

当前未派发事件（初始无溢出）

示例代码

oas-overflow 在溢出状态翻转时派发（detail: { overflow }），同值不重复派发；ResizeObserver 重测后的状态翻转同样会触发。

省略方向（direction）

start：省略头部，保留尾部

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

示例代码

middle：保留首尾，中部省略

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

示例代码

direction 取值：tail（默认，尾部省略）/ start（头部省略）/ middle（中部省略，保留首尾）。多行（rows/lines≥2）下 middle / start 同样生效：组件在 shadow 内以同宽度镜像容器测量文本折行，按行数二分截断——首行保头、末行保尾（middle），或省略头部保留尾部（start）；测量不可用的环境自动回退为全显。

多行省略方向

middle：多行保留首尾

多行 middle：首行保头、末行保尾，中部省略号衔接。

示例代码

start：多行省略头部，保留尾部

多行 start：省略头部，末尾路径完整保留。

示例代码

保留后缀（suffix）

suffix：省略时保留扩展名

示例代码

suffix 指定一个必须保留在省略结果末尾的后缀（如扩展名、邮箱域名）：tail 方向截断时预留后缀宽度，得到「正文…后缀」的效果。middle / start 方向自身已保留尾部，不叠加 suffix。

点文本展开（expand-trigger）

expand-trigger=click：点击文本展开

示例代码

expand-trigger="click"（需配合 expandable）：省略态文本本体即展开入口（无独立按钮形态），展开后恢复完整文本、再点收起；省略态文本具备 role="button" / tabindex="0" / aria-expanded 同步，键盘 Enter / Space 等价点击。缺省为按钮 / 链接形态（不变）。

tooltip 位置（tooltip-placement）

tooltip-placement 透传

placement=top（缺省）

placement=bottom

示例代码

tooltip-placement 属性把位置透传给内部 oas-tooltip（top / bottom / left / right，缺省 top），悬停全文提示按指定方位弹出。

关闭 tooltip

关闭 tooltip

示例代码

API

oas-ellipsis

属性

属性	说明	类型	默认值
collapse-text	收起链接文案（行内形态，配合 expandable）	—	—
direction	省略方向：tail（默认尾部）/ start（头部省略保留尾部）/ middle（中部省略保留首尾，长路径/哈希场景）；多行（lines/rows≥2）下 middle/start 走镜像测量截断	string	tail
expand-text	展开链接文案（行内形态，配合 expandable）	—	—
expand-trigger	展开触发形态：click 时省略态文本本体可点击展开/收起（配合 expandable，带 role=button 键盘可达）；缺省为按钮/链接形态	—	—
expandable	溢出时显示「展开/收起」按钮	boolean	—
expanded	受控展开态（属性在场受控；内部切换会反射回该属性）	boolean	—
lines	显示行数，与 rows 等价（同义别名，同时存在时 lines 优先；1 为单行，≥2 多行省略）	—	—
rows	显示行数（1 为单行省略，≥2 多行 -webkit-line-clamp）	string	1
suffix	省略时保留的尾后缀（如 .pdf），仅 tail 方向生效；middle/start 已保尾，不叠加	—	—
text	文本内容	string	—
tooltip	溢出时悬停展示全文 tooltip	string	true
tooltip-placement	省略提示浮层位置（透传定位引擎，默认 top）	string	top

事件

事件	说明
oas-collapse	收起，detail: { expanded: false }
oas-expand	展开，detail: { expanded: true }
oas-overflow	省略状态变化时派发，detail: { overflow }（同值不重复派发）

CSS 变量

CSS 变量	默认值
--oas-ellipsis-lines	2

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