Ellipsis 省略

用于单行或多行文本的截断显示，支持展开/收起与原生 tooltip。

基础用法

这是一段很长的文本，用于演示省略效果。当文本超过容器宽度或指定行数时，将显示省略号以保持界面整洁。

<template>
  <ex-ellipsis>
    这是一段很长的文本，用于演示省略效果。当文本超过容器宽度或指定行数时，将显示省略号以保持界面整洁。
  </ex-ellipsis>
</template>

多行省略

多行省略示例：支持设置显示的最大行数，多余内容以省略号结尾。当文本超过容器宽度或指定行数时，将显示省略号以保持界面整洁。

<template>
  <ex-ellipsis :lines="2">
    多行省略示例...
  </ex-ellipsis>
</template>

展开/收起

可展开/收起的省略文本，适用于较长段落的分段阅读体验。当文本超过容器宽度或指定行数时，将显示省略号以保持界面整洁。

<template>
  <ex-ellipsis :lines="2" expandable>
    可展开/收起的省略文本...
  </ex-ellipsis>
</template>

Tooltip

开启 tooltip 后，hover 时显示完整内容的浏览器原生提示。

<template>
  <ex-ellipsis tooltip>内容...</ex-ellipsis>
</template>

API

Props

参数	说明	类型	默认值
lines	省略的行数	number	1
expandable	是否可展开/收起	boolean	false
tooltip	hover 显示原生提示	boolean	true
ariaLabel	无障碍标签	string	''

Slots

名称	说明
default	文本内容

Exposes

方法名	说明
getElement	获取根元素

主题定制

:root {
  --ex-ellipsis-gradient: linear-gradient(90deg, transparent, var(--ex-color-bg));
}

无障碍与国际化

• 对纯装饰省略不建议作为唯一的信息传递，应提供查看完整内容的交互（expandable）。
• 文本内容应走 i18n，不写死。