文本超出解决方案

需求

文本超出则显示省略号，且鼠标 hover 出现 tooltip、没超出则不显示 tooltip
多行文本超出显示省略号

需求 1 解决方案

mouseover 的时候获取文本的宽度和盒子的宽度

对比宽度，如果文本的宽度超出盒子的宽度，则出现 tooltip

<div class="intro" @mouseover="handleMouseOver">
  <el-tooltip
    v-if="toolTipShow"
    class="item"
    effect="dark"
    placement="top"
    :content="item.memo"
  >
    <p>{{ item.memo }}</p>
  </el-tooltip>
  <p v-else class="item">{{ item.memo }}</p>
</div>

handleMouseOver(e) {
  let offsetWidth = e.target.offsetWidth;
  let scrollWidth = e.target.scrollWidth;

  if (offsetWidth >= scrollWidth) {
    this.toolTipShow = false;
  } else {
    this.toolTipShow = true;
  }
},

需求 2 解决方案

单行文本

p {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

多行文本

p {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}