HTML文本溢出省略号检测

试试这个 JS 函数，将 span 元素作为参数传递：

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

---

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

这个想法是克隆元素，删除任何边界宽度，并测试克隆的元素是否比原始元素宽。如果是这样，您知道它将被截断。

例如，使用 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/

希望这会有所帮助，尽管它很老套。

---

添加到 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 回流（请参阅此处的 an explanation on DOM reflow），这会占用大量资源。

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

Italo Borssatto 的 answer 应该是被接受的，在我的分析过程中它快了大约 10 倍。

---

italo的回答非常好！但是让我稍微改进一下：

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

跨浏览器兼容性

事实上，如果您尝试上面的代码并使用 console.log 打印出 e.offsetWidth 和 e.scrollWidth 的值，您会注意到，在 IE 上，即使您没有文本截断，值差异也为1px 或 2px 是有经验的。

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

---

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

---

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

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

演示：https://jsfiddle.net/t4qs3tqs/

它适用于所有版本的 jQuery

---

所有的解决方案都没有真正为我工作，确实 工作是将元素 scrollWidth 与其父元素（或子元素，取决于哪个元素具有触发器）的 scrollWidth 进行比较。

当孩子的 scrollWidth 高于其父母时，这意味着 .text-ellipsis 处于活动状态。

当 el 是父元素时

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

当 el 是子元素时

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

---

我的实现）

常量项 = Array.from(document.querySelectorAll('.item')); items.forEach(item =>{ item.style.color = checkEllipsis(item) ? 'red': 'black' }) function checkEllipsis(el){ const styles = getComputedStyle(el); const widthEl = parseFloat(styles.width); const ctx = document.createElement('canvas').getContext('2d'); ctx.font = `${styles.fontSize} ${styles.fontFamily}`;常量文本 = ctx.measureText(el.innerText);返回 text.width > widthEl; } .item{ 宽度：60px;溢出：隐藏；文本溢出：省略号； }

---

我认为检测它的更好方法是使用 getClientRects()，似乎每个矩形都有相同的高度，所以我们可以用不同的 top 值的数量来计算行数。

getClientRects 像 this 一样工作

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

getRowRects 像 this 一样工作

您可以检测到 this

---

没有一个解决方案对我有用，所以我选择了一种完全不同的方法。我没有使用带有省略号的 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>

---

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

---

https://stackoverflow.com/users/241142/iconoclast 提到的演示 http://jsfiddle.net/brandonzylstra/hjk9mvcy/ 中有一些错误任务。

在他的演示中，添加这些代码将起作用：

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

---

如果您正在做出反应，这就是我的做法。

<div 
  ref={ref => {
    if (!ref) return
    const isOverflowing = ref.scrollWidth > ref.clientWidth
    if (isOverflowing) {
      // handle what to do next here
    }
  }}
/>

---

添加到@Дмытрык 答案，缺少边框和填充的扣除才能完全发挥作用！

常量项 = Array.from(document.querySelectorAll('.item')); items.forEach(item =>{ item.style.color = checkEllipsis(item) ? 'red': 'black' }) function checkEllipsis(el){ const styles = getComputedStyle(el); const widthEl = parseFloat(styles.width); const ctx = document.createElement('canvas').getContext('2d'); ctx.font = `${styles.fontSize} ${styles.fontFamily}`;常量文本 = ctx.measureText(el.innerText);让额外= 0;额外 += parseFloat(styles.getPropertyValue('border-left-width'));额外 += parseFloat(styles.getPropertyValue('border-right-width'));额外 += parseFloat(styles.getPropertyValue('padding-left'));额外 += parseFloat(styles.getPropertyValue('padding-right'));返回 text.width > (widthEl - 额外); } .item{ 宽度：60px;溢出：隐藏；文本溢出：省略号； }

---

对于使用 e.offsetWidth < e.scrollWidth 并遇到可以显示全文但仍然有省略号的错误的人。

这是因为 offsetWidth 和 scrollWidth 总是对值进行四舍五入。例如：offsetWidth 返回 161 但实际宽度为 161.25。解决方案是使用 getBoundingClientRect

const clonedEl = e.cloneNode(true)
clonedElement.style.overflow = "visible"
clonedElement.style.visibility = "hidden"
clonedElement.style.width = "fit-content"

e.parentElement.appendChild(clonedEl)
const fullWidth = clonedElement.getBoundingClientRect().width
const currentWidth = e.getBoundingClientRect().width

return currentWidth < fullWidth

---

@ItaloBorssatto 的解决方案非常完美。但在看之前 - 我做出了决定。这里是 ：）

const elems = document.querySelectorAll('span'); elems.forEach(elem => { checkEllipsis(elem); });函数 checkEllipsis(elem){ const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');常量样式 = getComputedStyle(elem); ctx.font = `${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;常量 widthTxt = ctx.measureText(elem.innerText).width; if (widthTxt > parseFloat(styles.width)){ elem.style.color = 'red' } } span.cat { display: block;边框：1px纯黑色；空白：nowrap；宽度：100px；溢出：隐藏；文本溢出：省略号； } 小猫 Looooooooooooooong Cat

---