element-ui show-overflow-tooltip 原理记录

<div>
  <div class="spanDom">咯技术的和卡仕达卡仕达和凯撒接电话卡是ask就电话卡手机号</div>
</div>

好奇其中原理就去搜资料看了一下，特此记录。

如上一串代码：

span内容过长出现省略号，这个就是一段css：

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

然后，要判断span内容的scrollWidth是否超出了div的clientWidth(div一定要设置宽度):

if (spanDom.scrollWidth > div.clientWidth) {
  spanDom.classList.add('a')
  // 其他操作
}

 

记录进步！！！