談談文本出現省略號和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 來判斷文本出現了省略號

為此，我查看了iview 、element-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-ui的issue中已經有好幾個類似的問題，都沒有加以解決

因而考慮除了上訴方式還有其他的形式進行判斷嗎？

• 1
• 2
• 3
• 4

在使用了上述的方式，感覺更加是瀏覽器的問題，目前這個問題只能暫時保留了。

總結

目前依舊無法解決這個問題，這應該也是element一直沒有處理的緣故吧，雖然都說是通過上面的方式解決，可一些特殊情況依舊無法處理。暫時默認為瀏覽器的bug吧

demo