Vue文本内容超出显示省略号，超出显示tooltip提示2.0

项目中固定宽度的容器文本超出显示省略号，超出部分显示tooltip场景很常见，所以自己就着手写了一个过滤器用于判断文本是否超出。
我用两种方式满足了需求，这是其中一种，想看另一种可以查看Vue文本内容超出显示省略号，超出显示tooltip提示

超出显示tooltip提示

我也是觉得第一种不太友好，找资料发现的这种方法。可以看一下这篇文章，下面就是HTML和CSS

<template>
  <div class="text-title-button" >
    <div class="the-msg">{{item.Name}}</div>
    <el-tooltip class="item" popper-class='my-tooltip' :enterable="false" effect="dark" :content="item.Name" placement="top">
      <div class="show-msg">{{item.Name}}</div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
    };
  },
  
}

</script>
<style >
.my-tooltip {
  transform: translateY(1em);
}
</style>
<style scoped>
.text-title-button {
  flex: 1;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
}
.the-msg {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 2em;
}

.show-msg {
  position: relative;
  top: -2em; // 本来自己占一个，所以向上两个
  opacity: 0;
  overflow: hidden;
}
</style>

首先咱们需要写两个重复的元素结构。当然是有区别的：

1. 正常写，但是得 向上移一个行高，将他设置透明
2. 需要 写 超出一行显示省略号 的样式

这样一来当超出了一行show-msg实际就在the-msg上面。那鼠标悬浮上去就是在show-msg上面。自然就有tooltip了。el-tooltip这也是个问题，如果一行高度太高可能悬浮的位置就不太对，这个要自己处理一下。我这边是把height 和 line-height设置为一样高。