HTML文本溢出省略号检测

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

当前回答

我认为更好的检测方法是使用getClientRects()，似乎每个rect都有相同的高度，所以我们可以用不同的顶部值来计算行数。

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;
}

getrowreck是这样工作的

你可以这样检测

2016-03-07 09:35:58

其他回答

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

2017-10-20 13:43:28

对于那些使用(或计划使用)来自Christian Varga的公认答案的人，请注意性能问题。

以这种方式克隆/操作DOM会导致DOM Reflow(请参阅此处关于DOM Reflow的解释)，这是非常资源密集型的。

在一个页面上使用Christian Varga的100多个元素的解决方案会导致4秒的回流延迟，在此期间JS线程被锁定。考虑到JS是单线程的，这意味着对最终用户来说有很大的UX延迟。

Italo Borssatto的答案应该是公认的，在我的分析过程中，它大约快了10倍。

2017-06-08 08:09:21

如果你使用线钳>= 2线在多行添加省略号，你可以使用这个调节:

if (
      descriptionElement &&
      descriptionElement.offsetHeight < descriptionElement.scrollHeight
    ) {
      // has text-overflow
    }

2022-07-28 12:49:12

@ItaloBorssatto的解决方案是完美的。但在看SO -之前，我做了一个决定。这就是:)

2020-01-17 17:32:27