你真的知道什麼狀況下text-overflow:ellipsis纔會生效嗎？

text-overflow:ellipsis是咱們用來設置文本溢出的一個經常使用屬性。

可是究竟什麼狀況纔會觸發文本溢出，大部分人確定沒有探究過。
我之前也沒有注意，反正這樣的css樣式一把梭，溢出了就點點點

width: 100px;
overflow: hidden;
text-overflow: ellipsis;

原本是沒啥問題的，直到測試給我提了一個bug：表格內的文字超長隱藏後鼠標hover沒有懸浮提示

我一個開始不信，我用的element-UI還會出問題？
不過看完源碼之後果真翻車了

const cellChild = event.target.querySelector('.cell');
if (hasClass(cellChild, 'el-tooltip') && cellChild.scrollWidth > cellChild.offsetWidth && this.$refs.tooltip) {
//執行懸浮窗顯示操做
}

問題就出在了cellChild.scrollWidth > cellChild.offsetWidth
爲了方便控制元素寬度，設置了box-sizing: border-box;
按照理解scrollWidth是內容的寬度，offsetWidth是容器的寬度。
也不會出問題，可是誰也沒想到當scrollWidth===offsetWidth時，
text-overflow:ellipsis竟然生效了。
重現效果：
http://jsfiddle.net/f0dmkkh8/1/

我天真的覺得cellChild.scrollWidth >= cellChild.offsetWidth不就完事了。

知道我看了element-UI最新的代碼才發現本身錯了，原來scrollWidth超出offsetWidth並非text-overflow:ellipsis觸發的條件。

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);

使用range對象截取dom片斷後獲取到的DOMRect對象的width纔是內容的真正寬度。（scrollWidth並非內容區域的真正寬度）

也就是說當

//加padding是應爲box-sizing:border-box;
rangeWidth + padding > cellChild.offsetWidth

成立時纔是觸發text-overflow:ellipsis真正的條件。