今天心血来潮，想封装一个 类似el-table-column 中的 属性
内容超出被隐藏显示"..."并且鼠标移上去会显示tooltip完整的内容
但是，由于这个属性只能存在于el-table组件里，若只是单纯的文本是无法达到这样的效果，需要自己手动封装。
于是我便打算封装一个(只需要传内容、宽度、超出几行隐藏)
- 内容超出被隐藏显示"..."，鼠标移上去会显示完整内容
- 可设置最多显示几行，超出后隐藏内容显示"...",鼠标移上去会显示完整内容
第一个需求比较容易实现，主要是第二个需求，我们知道平时我们要实现这个需求，其实也很简单：通过以下css便可以完成
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 显示到几行;
-webkit-box-orient: vertical;上述 不是这篇文章的重点-------------------------------------
判断 内容是否超出设定的行数，核心在于 判断 包含内容的元素的clientHeight 和 scrollHeight 两者是否相等。 相等说明 没有超出 设定的行数，不想等，意味着 scrollHeight > clientHeight
于是在我 获取scrollHeight 和 clientHeight 遇到了问题，也就是写这篇文章的重点
我发现，无论元素内容是否超出 clientHeight 总是比 scrollHeight 小，我很纳闷，于是 我单独只写一个div 里面包裹一些文字，在此获取clientHeight、scrollHeight 发现 居然还是 同样的问题
这就让我很郁闷了，在我不断尝试后无果，我自己新建一个html，在里面重新写一个div 同样的内容，惊奇的发现 clientHeight 和 scrollHeight 又相等了
到此刻 我心中慢慢开始有一些猜想，怀疑是不是font-family 字体的问题， 于是 我又回到原来 clientHeight 和 scrollHeight 不相等的项目里，改掉原先div的font-family
因为font-family 是会被继承的，我也不知道 这个项目原先 font-family 是什么，于是自己修改
后来 通过资料发现，字体的不同真的会导致 clientHeight 和 scrollHeight 不同，具体原理没有深究，
该组件后续会更新，本文章的目的是为了记录一下 踩到 font-family 这个坑
如果看到这里，对您有帮助，恰逢您也登录了，可否留下一些您的痕迹（暗示～～～）