项目中固定宽度的容器文本超出显示省略号，超出部分显示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>
首先咱们需要写两个重复的元素结构。当然是有区别的：
正常写，但是得向上移一个行高，将他设置透明需要 写超出一行显示省略号的样式
这样一来当超出了一行show-msg实际就在the-msg上面。那鼠标悬浮上去就是在show-msg上面。自然就有tooltip了。el-tooltip这也是个问题，如果一行高度太高可能悬浮的位置就不太对，这个要自己处理一下。我这边是把height 和 line-height设置为一样高。
