Skip to content

TextEllipsis 文本省略容器

TIP

一般是用于文本省略,并且需要文本省略时需要提示,不省略时不需要提示的时候使用,增强了文本省略的功能

组件引入:import { TextEllipsis } from @wetspace/pro-components

基本使用

多行省略

要保留几行,通过rows设置

配置tooltip属性

这里的配置是继承的 ElTooltip

控制tooltip最大宽度

这里扩展了ElTooltip的配置,增加了一个maxWidth

注意事项

  1. 本组件是文本容器,请勿直接在外层非span容器进行包裹,例如:<TextEllipsis><div>需要省略的文本</div></TextEllipsis>这样使用是错误的,本质上div等这些容器不属于文本,因此这样使用会导致无法精确计算,无法做到文本省略时提供提示,不省略不提供提示
  2. 该组件是根据外部容器的大小进行的一个宽度,高度识别,进行是否文本省略逻辑,因此在使用一些封装好的组件的时候也请加上div容器,进行宽度,高度大小限制
  3. 不建议直接在本组件上做paddingmarginposition这些css样式改动

属性

属性描述类型默许值
tooltip提示配置Partial<ElTooltipProps & { maxWidth:number }>-
rows保留行数number1

WetProElement