HTML文本溢出省略号检测
我有一个页面上的块元素的集合。 它们都具有CSS规则的空白，溢出，文本溢出设置，使得溢出的文本被修剪并使用省略号。
但是，并不是所有的元素溢出。
有反正我可以使用JavaScript来检测哪些元素溢出？
谢谢。
新增：我正在使用的HTML结构示例。
<td><span>Normal text</span></td> <td><span>Long text that will be trimmed text</span></td> SPAN元素总是适合单元格，他们应用了省略号规则。 我想要检测省略号是否应用于SPAN的文本内容。
曾几何时，我需要做到这一点，我遇到的唯一跨浏览器可靠的解决scheme是黑客工作。 我不是这样的解决scheme的最大粉丝，但它肯定会一次又一次地产生正确的结果。
这个想法是，你克隆的元素，删除任何边界宽度，并testing克隆的元素是否比原来的宽。 如果是这样，你知道它将被截断。
例如，使用jQuery：
var $element = $('#element-to-test'); var $c = $element .clone() .css({display: 'inline', width: 'auto', visibility: 'hidden'}) .appendTo('body'); if( $c.width() > $element.width() ) { // text was truncated. // do what you need to do } $c.remove();
我做了一个jsFiddle来演示这个， http://jsfiddle.net/cgzW8/2/
你甚至可以为jQuery创build自己的自定义伪select器：
$.expr[':'].truncated = function(obj) { var $this = $(obj); var $c = $this .clone() .css({display: 'inline', width: 'auto', visibility: 'hidden'}) .appendTo('body'); var c_width = $c.width(); $c.remove(); if ( c_width > $this.width() ) return true; else return false; };
然后用它来查找元素
$truncated_elements = $('.my-selector:truncated');
演示： http : //jsfiddle.net/cgzW8/293/
希望这会有所帮助，就像那样。
试试这个JS函数，传递span元素作为参数：
function isEllipsisActive(e) { return (e.offsetWidth < e.scrollWidth); }
添加到italo的答案，你也可以使用jQuery来做到这一点。
function isEllipsisActive($jQueryObject) { return ($jQueryObject.width() < $jQueryObject[0].scrollWidth); }
另外，正如Smoky所指出的那样，您可能希望使用jQuery outerWidth（）而不是width（）。
function isEllipsisActive($jQueryObject) { return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth); }
elem.offsetWdith VS ele.scrollWidth这为我工作！ https://jsfiddle.net/gustavojuan/210to9p1/
$(function() { $('.endtext').each(function(index, elem) { debugger; if(elem.offsetWidth !== elem.scrollWidth){ $(this).css({color: '#FF0000'}) } }); });
此示例显示文本截断的单元格表格上的工具提示。 基于表格宽度是dynamic的：
$.expr[':'].truncated = function (obj) { var element = $(obj); return (element[0].scrollHeight > (element.innerHeight() + 1)) || (element[0].scrollWidth > (element.innerWidth() + 1)); }; $(document).ready(function () { $("td").mouseenter(function () { var cella = $(this); var isTruncated = cella.filter(":truncated").length > 0; if (isTruncated) cella.attr("title", cella.text()); else cella.attr("title", null); }); });
演示： https ： //jsfiddle.net/t4qs3tqs/
它适用于所有版本的jQuery
最简单的（和跨浏览器）解决scheme实际上是将scrollWidth与clientWidth进行比较
工作代码在这里： https : //stackoverflow.com/a/19156627/1213445
对于使用（或计划使用）Christian Varga接受的答案的人，请注意性能问题。
以这种方式克隆/操作DOM导致DOM重排 （请参阅关于DOM重 排 的解释 ），这是非常耗费资源的。
对页面上的100多个元素使用Christian Varga的解决scheme导致了4秒的回stream延迟，在此期间JS线程被locking。 考虑到JS是单线程的，这对于最终用户来说意味着显着的UX延迟。
Italo Borssatto的答案应该是可以接受的答案 ，在我的分析中这个答案快了大约10倍。
从italo回答非常好！ 不过，让我稍微改进一下：
function isEllipsisActive(e) { var tolerance = 2; // In px. Depends on the font you are using return e.offsetWidth + tolerance < e.scrollWidth; }
跨浏览器兼容性
如果实际上你尝试了上面的代码并使用console.log打印出e.offsetWidth和e.scrollWidth的值，那么在IE上你会注意到，即使你没有文本截断，值的差异1px或2px是有经验的。
所以，根据您使用的字体大小，允许一定的容差！
我认为更好的方法来检测它是使用getClientRects() ，似乎每个矩形具有相同的高度，所以我们可以计算与不同的top值的数量的行数。
getClientRects像这样工作
function getRowRects(element) { var rects = [], clientRects = element.getClientRects(), len = clientRects.length, clientRect, top, rectsLen, rect, i; for(i=0; i<len; i++) { has = false; rectsLen = rects.length; clientRect = clientRects[i]; top = clientRect.top; while(rectsLen--) { rect = rects[rectsLen]; if (rect.top == top) { has = true; break; } } if(has) { rect.right = rect.right > clientRect.right ? rect.right : clientRect.right; rect.width = rect.right - rect.left; } else { rects.push({ top: clientRect.top, right: clientRect.right, bottom: clientRect.bottom, left: clientRect.left, width: clientRect.width, height: clientRect.height }); } } return rects; }
getRowRects像这样工作
你可以像这样检测
所有的解决scheme对我来说都不是真正的工作， 所做的工作是将元素scrollWidth与其父元素（或子元素，取决于哪个元素具有触发器）的scrollWidth进行比较。
当孩子的scrollWidth高于父母时，这意味着.text-ellipsis处于活动状态。
当event是父元素
function isEllipsisActive(event) { let el = event.currentTarget; let width = el.offsetWidth; let widthChild = el.firstChild.offsetWidth; return (widthChild >= width); }
当event是子元素时
function isEllipsisActive(event) { let el = event.currentTarget; let width = el.offsetWidth; let widthParent = el.parentElement.scrollWidth; return (width >= widthParent); }
