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

演示：

---

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

尝试此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）；
}

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

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

的值差

---

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

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

像

对于那些使用（或计划使用）Christian Varga的公认答案的人，您可以检测到类似的问题，请注意性能问题

以这种方式克隆/操作DOM会导致DOM回流（请参见此处），这是一种资源密集型的行为

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

---

Italo Borssatto的应该是可以接受的，在我的评测过程中大约快了10倍。

所有的解决方案对我来说都不起作用，有效的方法是将元素

scrollWidth

与其父元素（或子元素，取决于哪个元素有触发器）的

scrollWidth

进行比较

当子对象的

滚动宽度

高于其父对象时，表示

。文本省略号

处于活动状态

---

当

el

是父元素时

function isEllipsisActive(el) {
    let width       = el.offsetWidth;
    let widthChild  = el.firstChild.offsetWidth;
    return (widthChild >= width);
}

function isEllipsisActive(event) {
    let width       = el.offsetWidth;
    let widthParent = el.parentElement.scrollWidth;
    return (width >= widthParent);
}

---

当

el

是子元素时

function isEllipsisActive(el) {
    let width       = el.offsetWidth;
    let widthChild  = el.firstChild.offsetWidth;
    return (widthChild >= width);
}

function isEllipsisActive(event) {
    let width       = el.offsetWidth;
    let widthParent = el.parentElement.scrollWidth;
    return (width >= widthParent);
}

---

e.offsetWidth

解决方案并不总是有效

如果您想使用纯JavaScript，我建议您使用：

（打字稿）

public isEllipsisActive（元素：HTMLElement）：布尔值{
element.style.overflow='initial'；
const noEllipsisWidth=element.offsetWidth；
element.style.overflow='hidden'；
const ellipsisWidth=element.offsetWidth；
if（ellipsisWidth

解决方案@ItaloborSatto是完美的。但在考虑这个问题之前，我做出了决定。这是：）

const elems=document.queryselectoral（'span'）；
元素forEach（元素=>{
检查省略；
});
函数检查省略（elem）{
const canvas=document.createElement（'canvas'）；
const ctx=canvas.getContext（'2d'）；
常量样式=getComputedStyle（elem）；
ctx.font=`${styles.fontWeight}${styles.fontSize}${styles.fontFamily}`；
const widthTxt=ctx.measureText（elem.innerText）.width；
if（widthTxt>parseFloat（styles.width））{
elem.style.color='red'
}
}

span.cat{
显示：块；
边界：
function isEllipsisActive(event) {
    let width       = el.offsetWidth;
    let widthParent = el.parentElement.scrollWidth;
    return (width >= widthParent);
}

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

setTimeout(() => {      
  console.log(EntryElm[0].offsetWidth)
}, 0)