HTML文本溢出省略号检测

Question

我在页面上有一组块元素.它们都具有CSS规则white-space,overflow,text-overflow set,以便修剪溢出的文本并使用省略号.

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

无论如何,我可以使用javascript来检测哪些元素溢出？

谢谢.

补充:我正在使用的示例HTML结构.

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

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

Answer 1

试试这个JS函数,将span元素作为参数传递:

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

Answer 2

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

我们的想法是克隆元素,删除任何边界宽度,并测试克隆元素是否比原始元素宽.如果是这样,你知道它会被截断.

例如,使用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/

希望这有助于实现hacky.

Answer 3

添加到italo的答案,你也可以使用jQuery来做到这一点.

function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.width() < $jQueryObject[0].scrollWidth);
}

另外,正如Smoky指出的那样,您可能希望使用jQuery outerWidth()而不是width().

function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);
}

Answer 4

此示例在单元格表格上显示工具提示，并截断文本。根据表格宽度动态变化：

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

Answer 5

对于那些使用(或计划使用)Christian Varga接受的答案的人,请注意性能问题.

以这种方式克隆/操作DOM会导致DOM Reflow(请参阅此处有关DOM reflow的解释),这非常耗费资源.

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

Italo Borssatto的答案应该是被接受的答案,在我的分析中它快了大约10倍.

Answer 6

所有的解决方案并不真正适合我，有效的是将元素scrollWidth与scrollWidth其父元素（或子元素，取决于哪个元素具有触发器）进行比较。

当孩子的scrollWidth比父母高时，就意味着.text-ellipsis活跃。

什么时候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);
}

Answer 7

来自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.offsetWidthand的值e.scrollWidth，你会注意到，在 IE 上，即使你没有文本截断，也经历了1px或的值差异2px。

因此，根据您使用的字体大小，允许有一定的公差！

Answer 8

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

Answer 9

最简单（也是跨浏览器）的解决方案实际上是将scrollWidth与clientWidth进行比较

此处的工作代码：https : //stackoverflow.com/a/19156627/1213445