其他分享
首页 > 其他分享> > element-ui show-overflow-tooltip 原理记录

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')
  // 其他操作
}

 

记录进步!!!

 

标签:scrollWidth,spanDom,电话卡,show,tooltip,element,clientWidth,overflow,div
来源: https://www.cnblogs.com/sxdjy/p/16068306.html