HTML 文本溢出省略号检测

IT技术 javascript html css ellipsis
2021-02-02 01:46:05

我在页面上有一组块元素。它们都设置了 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 的文本内容。

6个回答

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

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}
text-overflow:ellipsis它应该是e.offsetWidth <= e.scrollWidth
2021-03-13 01:46:05
对于那些需要了解offsetWidth、scrollWidth和clientWidth的人,这里有一个很好的解释:stackoverflow.com/a/21064102/1815779
2021-03-14 01:46:05
这应该是答案 - 非常优雅,适用于 Chrome 和 IE(9)
2021-03-18 01:46:05
他们在 flex 孩子上总是平等的,因此,对他们不起作用。
2021-03-28 01:46:05
这个答案和亚历克斯的答案在 IE8 中不起作用;有一些奇怪的情况,滚动宽度和外宽度相同......但它有省略号,然后在某些情况下它们相同......并且没有省略号。换句话说,第一个解决方案是唯一适用于所有浏览器的解决方案。
2021-04-09 01:46:05

曾几何时,我需要这样做,而我遇到的唯一跨浏览器可靠解决方案是 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/

希望这会有所帮助,尽管如此。

似乎这在没有white-space: nowrap.
2021-03-20 01:46:05
我必须说,在互联网上搜索了很多并尝试实施了许多解决方案之后,这是迄今为止我发现的最可靠的解决方案。这个解决方案不会在像 element.innerWidth 或 element.OffsetWidth 这样的浏览器之间给出不同的结果,这在使用边距或填充时会出现问题..很好的解决方案,干得好。
2021-03-20 01:46:05
@劳里不;CSS 截断不会更改框中实际文本,因此内容始终相同,无论是被截断、可见还是隐藏。仍然无法以编程方式获取截断的文本,如果有的话,您就不需要首先克隆该元素!
2021-03-21 01:46:05
很好的解决方案,尤其是使用 jQuery 伪选择器。但有时可能不起作用,因为如果元素文本具有不同的样式(字体大小、字母间距、内部元素的边距),则宽度计算不正确。在这种情况下,我建议将 clone 元素附加到 $this.parent() 而不是“body”。这将提供元素的精确副本并且计算将是正确的。不管怎么说,还是要谢谢你
2021-03-31 01:46:05
对我来说,这在任何地方都不起作用。我不确定它是如何依赖 CSS 的(我尝试在输入控件上使用它,下面的解决方案至少在 Chrome 和 Firefox 中有效(但在 IE11 中无效))...
2021-04-07 01:46:05

添加到 italo 的答案中,您还可以使用 jQuery 执行此操作。

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

此外,正如 Smoky 所指出的,您可能希望使用 jQuery 外层宽度()而不是宽度()。

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

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

以这种方式克隆/操作 DOM 会导致DOM 重排(请参阅此处对 DOM 重的解释),这是非常耗费资源的。

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

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

不幸的是,它并不适用于所有场景(我希望它会)。您在此处提到的性能影响可以通过仅在您需要检查的情况下运行它来抵消 - 例如仅mouseenter用于查看是否需要显示工具提示。
2021-04-11 01:46:05

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'})
    }
  });
});
在当前的 Chrome 和 Firefox 中都不起作用。两个元素都变成红色。
2021-03-20 01:46:05