Javascript HTML文本溢出省略号检测

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

但是，并非所有元素都会溢出

我是否可以使用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来演示这一点

您甚至可以为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');

演示：

---

希望这会有所帮助，尽管它是哈奇的

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

其思想是克隆图元，删除任何边界宽度，然后测试克隆的图元是否比原始图元宽。如果是这样的话，你知道它会被截断

例如，使用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来演示这一点

您甚至可以为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');

演示：

---

希望这会有所帮助，尽管它是哈奇的

尝试此JS函数，将span元素作为参数传递：

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

函数是智能的（e）{
返回值（e.offsetWidth

尝试此JS函数，将span元素作为参数传递：

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

函数是智能的（e）{
返回值（e.offsetWidth

除了italo的答案之外，您还可以使用jQuery来实现这一点

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

函数为EllipsisActive（$jQueryObject）{
返回（$jQueryObject.width（）<$jQueryObject[0].scrollWidth）；
}

另外，正如Smoky指出的，您可能希望使用jQuery outerWidth（）而不是width（）

函数为EllipsisActive（$jQueryObject）{
返回（$jQueryObject.outerWidth（）<$jQueryObject[0].scrollWidth）；
}

除了italo的答案之外，您还可以使用jQuery来实现这一点

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

函数为EllipsisActive（$jQueryObject）{
返回（$jQueryObject.width（）<$jQueryObject[0].scrollWidth）；
}

另外，正如Smoky指出的，您可能希望使用jQuery outerWidth（）而不是width（）

函数为EllipsisActive（$jQueryObject）{
返回（$jQueryObject.outerWidth（）<$jQueryObject[0].scrollWidth）；
}

此示例显示单元格表上的工具提示，文本被截断。是基于表格宽度的动态的：

$.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);
    });
});

演示：

---

它适用于所有版本的jQuery

此示例显示单元格表上的工具提示，文本被截断。是基于表格宽度的动态的：

$.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);
    });
});

演示：

它适用于所有版本的jQuery

italo的回答非常好！但是，让我对其进行一点细化：

function isEllipsisActive(e) {
   var tolerance = 2; // In px. Depends on the font you are using
   return e.offsetWidth + tolerance < e.scrollWidth;
}

函数是智能的（e）{
var-tolerance=2；//在px中。取决于您使用的字体
返回e.offsetWidth+公差

跨浏览器兼容性 事实上，如果您尝试上述代码并使用

console.log

打印

e.offsetWidth

和

e.scrollWidth

的值，您会注意到，在IE上，即使没有文本截断，也会出现

1px

或

2px

的值差

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

italo的回答非常好！但是，让我对其进行一点细化：

function isEllipsisActive(e) {
   var tolerance = 2; // In px. Depends on the font you are using
   return e.offsetWidth + tolerance < e.scrollWidth;
}

函数是智能的（e）{
var-tolerance=2；//在px中。取决于您使用的字体
返回e.offsetWidth+公差

跨浏览器兼容性 事实上，如果您尝试上述代码并使用

console.log

打印

e.offsetWidth

和

e.scrollWidth

的值，您会注意到，在IE上，即使没有文本截断，也会出现

1px

或

2px

的值差

---

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

elem.offsetWdith VS ele.scrollWidth 这是我的工作！

---

元素偏移与元素滚动宽度 这是我的工作！

---

我认为更好的检测方法是使用

getclientracs（）

，似乎每个矩形都有相同的高度，因此我们可以用不同的

top

值计算行数

getclientracts

像

函数getRowRects（元素）{ var rects=[]， clientRects=element.getClientRects（）， len=clientracts.length， clientRect，top，rectsLen，rect，i； for（i=0；i clientRect.right？rect.right:clientRect.right； rect.width=rect.right-rect.left； } 否则{ 直推({ top:clientRect.top， 右：clientRect.right， 底部：clientRect.bottom， 左：clientRect.left， 宽度：clientRect.width， 高度：clientRect.height }); } } 返回矩形； }

getRowRects

像

---

你可以像

一样检测，我认为更好的检测方法是使用

getClientRects（）

，似乎每个矩形都有相同的高度，所以我们可以用