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


当前回答

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

希望这能帮到你。

其他回答

这些解决方案都不适合我,所以我选择了一种完全不同的方法。我没有使用带有省略号的CSS解决方案,而是从特定的字符串长度中剪切文本。

  if (!this.isFullTextShown && this.text.length > 350) {
    return this.text.substring(0, 350) + '...'
  }
  return this.text

并显示“更多/更少”按钮,如果长度超过。

  <span
    v-if="text.length > 350"
    @click="isFullTextShown = !isFullTextShown"
  >
    {{ isFullTextShown ? 'show less' : 'show more' }}
  </span>

除了italo的答案,还可以使用jQuery来实现。

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

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

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

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

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

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

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

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

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

e.offsetWidth < e.scrollWidth解决方案并不总是有效。

如果你想使用纯JavaScript,我建议使用这个:

(打印稿)

public isEllipsisActive(element: HTMLElement): boolean {
    element.style.overflow = 'initial';
    const noEllipsisWidth = element.offsetWidth;
    element.style.overflow = 'hidden';
    const ellipsisWidth = element.offsetWidth;

    if (ellipsisWidth < noEllipsisWidth) {
      return true;
    } else {
      return false;
    }
}