我在页面上有一个块元素的集合。它们都有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的文本内容。


当前回答

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

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

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

其他回答

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

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

所有的解决方案并没有真正为我工作,什么工作是比较元素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'})
    }
  });
});

在比较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

曾几何时,我需要这样做,我遇到的唯一跨浏览器可靠的解决方案是hack job。我不是这种解决方案的最大粉丝,但它肯定会一次又一次地产生正确的结果。

其思想是克隆元素,删除任何边界宽度,并测试克隆的元素是否比原始元素宽。如果是,你知道它将被截断。

例如,使用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创建自己的自定义伪选择器:

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

希望这能帮到你。