跳到正文

Ellipsis 文本省略

Ellipsis 把文本截成一行,或 lineClamp 行,末尾显示省略号。文本被截断时,Tooltip 显示全文;expandTrigger="click" 可以点击原地展开。截断完全由 CSS 完成(text-overflow 和行数截断);组件在每次渲染后和尺寸变化时测量文本是否溢出,所以只有确实被截断时才会出现提示和点击展开。

演示

基础用法

不设 lineClamp 时文本保持一行,宽度取容器或 max-width。放得下的文本没有提示。

多行

lineClamp 设置最多显示的行数。

提示

tooltip 接受 Tooltip 的属性:比如 placement,或用 content 显示别的内容。tooltip={false} 关闭提示。

点击展开

expandTrigger="click" 让被截断的文本成为按钮(也支持 Enter 和空格),点击切换全文。点击已经能看到全部内容时,可以关掉提示。

受控与「展开」按钮

expanded 受控展开状态,这里由 after 里的按钮控制。after 永远不会被截断:有 lineClamp 时它在最后一行可见文字的末尾。before 和 after 里的按钮或链接按主题的链接样式显示成行内文字操作。

尺寸变化

拖动方框右下角:省略号和提示跟着宽度变化。

长列表

PerformantEllipsis 的属性和 Ellipsis 相同。它只渲染截断后的文本,指针移入某一行或获得焦点时才挂载测量和 Tooltip,所以一千行不会创建一千个 ResizeObserver 和 Tooltip。挂载时文本元素会被替换,不要持有它的 ref。

Ellipsis Props

PerformantEllipsis 的属性相同。

名称类型默认值说明版本
lineClampnumber | stringundefined最多显示的行数。不设时保持一行。未发布
tooltipboolean | EllipsisTooltipPropstrue文本被截断时用 Tooltip 显示全文。传对象时作为 Tooltip 的属性。未发布
expandTriggerclickundefinedclick 时点击被截断的文本切换全文。未发布
expandedbooleanundefined受控的展开状态。未发布
defaultExpandedbooleanfalse非受控时的初始展开状态。未发布
onExpandedChange(expanded: boolean) => voidundefined点击文本展开或收起时调用。未发布
beforeReactNodeundefined显示在文本前,不会被截断。未发布
afterReactNodeundefined显示在文本后,不会被截断;有 lineClamp 时在最后一行末尾。未发布

其他属性和 ref 传给根 span。提示的内容用 tooltip.content 设置。expanded、before、after 来自 vue-clamp;不同的是这里由 CSS 截断,所以 after 浮动在最后一行末尾,而不是紧跟最后一个可见的词。