el-tooltip和文本省略号实现精准同步（有省略号有文字提示，没有省略号没有文字提示）

#demo{width:100%;跨度{宽度：100px；显示：内联块；空白：nowrap；文本溢出：省略号；溢出：隐藏；分词：break-all；}}项目经常遇到这样的问题或需求：一段文字A，如果A较短，则完整显示；如果A比较长，会显示一个省略号，鼠标悬停会有提示，类似el-tooltip（或者单独写一个提示框）。如何处理这样的问题或需求？？？一般的解决方案是（以Vue、elementUI为例）：1、通过确定文字A的长度，控制提示框的显示/隐藏，代码如下：#demo{width:100%;跨度{宽度：100px；显示：内联块；空白：nowrap；文本溢出：省略号；溢出：隐藏；分词：break-all；}}上面的代码会出现这样的问题：如果全是汉字，会正常显示；如果它包含数字、英文字母或符号，就会出现问题。将文字改为英文、数字或字符，不显示省略号，但鼠标悬停后会有文字提示。2.第二种方案可以说是上述方案的升级版：省略号不需要样式控制，而是手动添加（比如通过filter处理）。代码如下：#demo{width:100%;跨度{宽度：100px；显示：内联块；}}这个解决方案避免了第一个严重的问题。看起来很完美，但是还是有瑕疵：虽然只有出现省略号的时候才会出现提示框，但是会出现鼠标悬停。但是，汉字、数字、英文或符号“在出现省略号的关键点上，文本长度不同”。比如上面代码中汉字出现省略号的临界点是6个汉字，文字长度刚好填满span标签（宽度为100px）；但是数字，英文或者符号，虽然临界点也是6，但是文本长度低于span标签设置的固定宽度。该方案存在的问题是：汉字、数字、英文字母、符号等带有省略号的文字长度不能统一。以上两种解决方案的问题根源：一个汉字占2个字符；一个数字、一个英文字母或一个符号占1个字符。3、第三种处理方案：将汉字、数字、英文字母和符号处理成统一的形式（例如以汉字为标准，将数字、英文字母和符号进行相应的转换）。这种方法可以彻底解决问题。但是有点麻烦，不推荐。>终极解决方案：个人理解：以上解决方案都是从字节开始，在浏览器渲染之前，但是字节编码的形式多种多样，导致各种问题。虽然可以完全解决，但不是最优解。建议解决方案：在浏览器中渲染完字节后开始：获取最终文本宽度widthA，外壳为固定宽度（或区间宽度）widthB，代码如下：使用.vue中的封装组件yjlfile-ellipsis(componentisregisteredglobal)#structure{width:100%;}封装组件yjl-ellipsis代码（全局注册):#yjlEllipsis{宽度：100%；.contentCls{//外壳已经处理过单行文字溢出显示display:inline-block;空白：nowrap；文本溢出：省略号；溢出：隐藏；分词：break-all；}}处理思路：1、壳B，为固定宽度（或区间宽度）widthB，进行单行文字溢出显示省略号处理，嵌入文字A；2、文本A，通过mouseenter事件（hanldeElTooltip）获取文本的实际宽度widthA；3．widthA与widthB进行比较，然后控制el-tooltip的disabled属性（Tooltip是否可用），最终实现效果。width),contentText(文字内容);2.全局注册组件，本文没有体现。