共计 1245 个字符，预计需要花费 4 分钟才能阅读完成。
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 真正的条件。
