一个工具函数，实现页面tooltip组件的限制使用

需求描述

有这样一个需求:页面已经写了太多的详情表单元素，并且每一个表单元素都使用了Tooltip组件来包裹，这样是不符合需求的，因为用户需要限定当表单元素的文本太多时，也就是说出现了省略号才会出现Tooltip组件的包裹。比如项目采用的element UI组件库。在一个页面有太多的这样的表单元素:

<el-form>
   <el-form-item label="姓名" prop="name">
       <el-tooltip :content="form.name">
           <el-input v-model="form.name" disabled="true"></el-input>
       </el-tooltip>
   </el-form-item>
   .....后续出现多个这样的元素
</el-form>

如果我每一个都加disabled属性，那么页面模板元素有将近一百个，很显然我这样加是很耗费时间的，很显然对于追求高效的我是不喜欢一个一个加，然后一个一个判断的。

在这之前，我们需要确定一点，那就是我们控制文本的截断是通过CSS代码来实现的。也就是如下这段代码:

.el-input {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

因此，完成以上的需求的第一步就是需要先判断哪些元素满足被截断的条件。那么如何判断文本是否被截断呢？关于这个实现，我想element ui的表格组件符合这种场景，所以我只需要去参考一下element ui的表格组件的截断判断实现就知道了。

创建range元素

核心思路就是创建一个range元素，通过获取range元素width然后与元素的offsetWidth进行判断就行了。所以，我按照element ui的实现思路完成了这个工具函数。如下所示:

function isTextOverflow(element) {
    // use range width instead of scrollWidth to determine whether the text is overflowing
    // to address a potential FireFox bug: https://bugzilla.mozi