我在页面上有一个块元素的集合。它们都有CSS规则white-space, overflow, text-overflow设置,以便溢出的文本被修剪并使用省略号。

但是,并非所有元素都溢出。

有没有办法,我可以使用javascript来检测哪些元素溢出?

谢谢。

添加:示例HTML结构我正在工作。

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

SPAN元素总是适合单元格,它们应用了省略号规则。我想检测何时将省略号应用于SPAN的文本内容。


当前回答

所有的解决方案并没有真正为我工作,什么工作是比较元素scrollWidth其父(或子,取决于哪个元素有触发器)的scrollWidth。

当子进程的scrollWidth大于父进程的scrollWidth时,就意味着.text-省略号是活动的。


当el是父元素时

function isEllipsisActive(el) {
    let width       = el.offsetWidth;
    let widthChild  = el.firstChild.offsetWidth;
    return (widthChild >= width);
}

当el是子元素时

function isEllipsisActive(event) {
    let width       = el.offsetWidth;
    let widthParent = el.parentElement.scrollWidth;
    return (width >= widthParent);
}

其他回答

初步的。offsetWdith VS le. scrollwidth 这对我很有用! https://jsfiddle.net/gustavojuan/210to9p1/

$(function() {
  $('.endtext').each(function(index, elem) {
    debugger;
    if(elem.offsetWidth !== elem.scrollWidth){
      $(this).css({color: '#FF0000'})
    }
  });
});

在演示http://jsfiddle.net/brandonzylstra/hjk9mvcy/中https://stackoverflow.com/users/241142/iconoclast提到了一些错误。

在他的演示中,添加这些代码将工作:

setTimeout(() => {      
  console.log(EntryElm[0].offsetWidth)
}, 0)

来自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的值差异。

所以,根据你使用的字体大小,允许一定的容忍度!

在比较offsetWidth > scrollWidth时,上面的答案有一个小像素问题。

W3C有一个返回元素的遗留API。scrollWidth值被四舍五入,这导致比较在某些情况下返回false。 如果元素宽度为150px, scrollWidth为150.4px(四舍四入到150),那么即使浏览器在文本中显示省略号,该检查也将返回false。

他们已经尝试更新返回分数像素的api,但由于webcompat,它被恢复了。

有一个使用max-content和getClientRects()的变通方法。 这是一个示例代码,我使用onMouseEnter。 注意,这只在容器的边界为可用宽度的100%时才有效(因此,如果您使用flexbox,您的容器必须为flex: 1例如。

hasEllipsis(elementItem) {
    let scrollWidth = elementItem.scrollWidth;
    
    elementItem.style.width = 'max-content';
    const itemRects = elementItem.getClientRects();

    if (itemRects.length > 0 && itemRects[0].width > scrollWidth) {
        scrollWidth = itemRects[0].width;
    }

    elementItem.style.width = 'auto';
    return scrollWidth > elementItem.clientWidth;
}

文章:

https://bugs.chromium.org/p/chromium/issues/detail?id=980476

https://github.com/w3c/csswg-drafts/issues/4123

此示例显示单元格表上的工具提示,文本被截断。是基于表宽度动态的:

$.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