你真的知道什么情况下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真正的条件。