在开发过程中，经常有这样的需求：一段文本内容，若文本内容较短的话，页面上则展示全部内容，若文本内容较长，则需要超出部分打点，然后鼠标hover的时候需要提示，在提示框中显示所有文本内容。

因为我们项目里引入了element-ui，所以我一般用el-tooltip来实现文本提示框：

当产品说超出xx个字符就打点，然后鼠标滑过提示全部，那么一般的处理就是这样的：

1.通过判断文本的长度，控制el-tooltip的显示和隐藏，通过css样式控制文本打点：

 这样子的处理方式时，可能会出现当文本内容不全是中文字符，而是数字或者英文的时候，这个时候文本内容可能已经超过10个字符了，但是却没有展示省略号，但是鼠标hover的时候却会展示提示框。

为了解决这个问题，那我们当然有办法解决啦，2.就是通过判断文本的长度，强制的限制字符展示在页面上的个数，超出部分省略号展示，所以我们又会使用下面这个方法：

这个方法已经可以满足大部分的场景和需求了，超过X个字符既展示了省略号，鼠标滑过的时候又可以提示内容~

        那要是现在有个这样的需求：现在有一段文本，不知道到底会有多少字符，字符数可能很长也可能很短，产品也不能确定要展示几个字符比较好，她就希望你能实现，在某个区域内，并且这个区域的宽度能随着屏幕大小的变化，当文本长度大于那个区域宽度的时候超出部分就展示省略号，鼠标滑过时出现提示框提示文本的全部内容；文本内容很短的时候，就展示全部内容，且不展示提示框。 

那这时候上面的两种方法都无法实现，那怎么办呢？？

其实还是有办法的，就是拿到最终的文本内容的真实宽度widthA，和包裹文本内容的盒子的实际宽度widthB，对二者进行判断，若文本widthA >  widthB  就展示el-tooltip。

所以我们可以对包裹文本内容的盒子做文本溢出显示省略号处理,通过mouseenter事件获取文本的实际真实宽度，和包裹文本内容的盒子的实际宽度，对二者进行比较，根据比较结果，控制el-tooltip的disabled属性，实现最终效果。

思路确定下来，就可以封装一个组件了，可以按需使用：

使用时，只需要把文本内容和需要的el-tooltip的样式传进去就可以了~通过mouseenter事件实时的获取scrollWidth和offsetWidth，即使是在不同宽度的屏幕上，或者文本宽度不确定时，也可实现一样的效果。

例如：

页面上的实现效果：

当方案名称文本内容没超出内容区宽度时，鼠标滑过不提示文案：

当方案名称太多太长时，鼠标滑过展示提示文案： 

使用这个组件，就可以文本自适应超出打点并提示文本信息的需求啦~

最后，我们一起来复习一下scollWidth,clientWidth,offsetWidth的区别：

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。