HTML文本溢出省略号检测 [英] HTML text-overflow ellipsis detection

问题描述

我有一个页面上的块元素的集合。它们都有CSS规则的空白，溢出，文本溢出设置，以便溢出的文本被修剪和使用省略号。

但是，并不是所有的元素溢出。

有没有反正我可以使用javascript来检测哪些元素溢出？

已添加：我正在使用的HTML结构示例。

 < td& < span>正常文字< / span>< / td> 
< td>< span>将修剪文字的长文字< / span>< / td> 
  

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

解决方案

一次我需要做这是唯一的跨浏览器可靠的解决方案，我遇到的是黑客工作。我不是这样的解决方案的最大粉丝，但它一定会产生正确的结果一次又一次。

想法是克隆元素，删除任何边界宽度，并测试克隆元素是否比原始元素宽。

例如，使用jQuery：

  var $ element = $（'＃element-to-test'）; 
 var $ c = $ element 
 .clone（）
 .css（{display：'inline'，width：'auto'，visibility：'hidden'}）
。 appendTo（'body'）; 
 
 if（$ c.width（）> $ element.width（））{
 //文本被截断。 
 //做你需要做的事
} 
 
 $ 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/

希望这有助于解决问题。

I have a collection of block elements on a page. They all have the CSS rules white-space, overflow, text-overflow set so that overflowing text is trimmed and an ellipsis is used.

However, not all the elements overflow.

Is there anyway I can use javascript to detect which elements are overflowing?

Thanks.

Added: example HTML structure I am working with.

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

The SPAN elements always fit in the cells, they have the ellipsis rule applied. I want to detect when the ellipsis is applied to the text content of the SPAN.

解决方案

Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again.

The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. If so, you know it's going to have been truncated.

For example, using 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();

I made a jsFiddle to demonstrate this, http://jsfiddle.net/cgzW8/2/

You could even create your own custom pseudo-selector for 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;
};

Then use it to find elements

$truncated_elements = $('.my-selector:truncated');

Demo: http://jsfiddle.net/cgzW8/293/

Hopefully this helps, hacky as it is.

这篇关于HTML文本溢出省略号检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！