其他分享
首页 > 其他分享> > 谈谈文本出现省略号和tooltip相爱相杀的那些事

谈谈文本出现省略号和tooltip相爱相杀的那些事

作者:互联网

在开发过程中,一般都会遇到一行显示不下便进行省略号处理的方式(我是省略文字...)。在使用element-ui的表格组件时,便常常使用这个,但也一直受其BUG困扰,在edge & firefox 时,会在出现省略号时并不出现弹框。归根结底在于,如何判断是否省略号,只需解决这个问题即可

讨论如何判断文本是否出现省略号

文本出现省略号

/* 单行显示 */
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
/* n行显示 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: n;
overflow: hidden;

如何判断文本是否出现了省略号

scrollWidth

目前一般是通过 scrollWidth > clientWidth 来判断文本出现了省略号

为此,我查看了iviewelement-ui 都是通过该方式实现,只是element外加了一些方式加以辅助,奈何依旧有问题

elment

const range = document.createRange();
      range.setStart(cellChild, 0);
      range.setEnd(cellChild, cellChild.childNodes.length);
      const rangeWidth = range.getBoundingClientRect().width;
      const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
        (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);

      if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
        // tooltip 出现
      }

可惜在element-uiissue中已经有好几个类似的问题,都没有加以解决

因而考虑除了上诉方式还有其他的形式进行判断吗?

在使用了上述的方式,感觉更加是浏览器的问题,目前这个问题只能暂时保留了。

总结

目前依旧无法解决这个问题,这应该也是element一直没有处理的缘故吧,虽然都说是通过上面的方式解决,可一些特殊情况依旧无法处理。暂时默认为浏览器的bug吧

demo

标签:省略号,cellChild,相杀,tooltip,element,range,overflow,文本
来源: https://www.cnblogs.com/sinosaurus/p/12113202.html