单行及多行文本溢出打点及悬停tooltips的实现

场景

经常在项目中遇到文本过长的情况，为了显示美观，一般会将溢出部分用省略号显示，并在鼠标悬停时展示全部文本。除了单行文本，有时还会要求对多行文本超过一定行数时进行处理。这里记录一下组件的实现。

效果

单行

多行效果

代码

html部分：这里用的vue2+tsx写法。这里根据传入的rows来判断是否为多行文本，并设置不同样式。onMouseenter用于监听鼠标移入事件，并在移入时判断文本是否溢出，溢出才显示tooltips

-webkit-line-clamp，用于限制在一个块级元素（如 div 或 p）中显示的文本行数。

<el-tooltip
        class="item"
        effect="dark"
        content={this.content}
        placement="top"
        disabled={!this.isShowToolTip}
      >
        <div
          class={this.rows === 1 ? 'text-tooltip-wrap' : 'text-tooltip-rows-wrap'}
          style={{ maxHeight: this.rows * 1.5 + 'em', '-webkit-line-clamp': this.rows }}
          onMouseenter={(e: any) => this.visibilityChange(e)}
        >
          {this.content}
        </div>
   </el-tooltip>

js部分：

visibilityChange(event: any) {
    if (!event || !event.target) {
      return false;
    }
    const target = event.target as HTMLElement;
    const scrollWidth = target.scrollWidth; // 文本的实际宽度
    const clientWidth = target.clientWidth; // 文本的可视宽度
    const scrollHeight = target.scrollHeight;
    const clientHeight = target.clientHeight;
    if (this.rows > 1) this.isShowToolTip = scrollHeight > clientHeight;
    else this.isShowToolTip = scrollWidth > clientWidth;
  }

css部分：

.text-tooltip-wrap {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.text-tooltip-rows-wrap {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5em;
    text-overflow: ellipsis;
    overflow: hidden;
}