Question

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

然而，并非所有元素都溢出。

无论如何我可以使用javascript来检测哪些元素溢出了？

感谢。

补充：我正在使用的示例HTML结构。

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

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

Answer 1

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

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

Answer 2

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

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

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

希望这会有所帮助，实际上是hacky。

Answer 3

添加到italo的答案，您也可以使用jQuery执行此操作。

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

另外，正如Smoky指出的那样，你可能想使用jQuery outerWidth（）而不是width（）。

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

Answer 4

对于那些使用（或计划使用）Christian Varga接受的答案的人，请注意性能问题。

以这种方式克隆/操纵DOM会导致 DOM Reflow （请参阅此处an explanation on DOM reflow），这是非常耗费资源的。

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

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

Answer 5

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

Answer 6

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

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

Answer 7

最简单的（和跨浏览器）解决方案实际上是将scrollWidth与clientWidth进行比较

此处的工作代码：https://stackoverflow.com/a/19156627/1213445

Answer 8

来自 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的价值差异。

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

Answer 9

我认为检测它的更好方法是使用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

Answer 10

所有解决方案对我来说都不起作用，做了什么工作是将元素scrollWidth与其父级（或子级）的scrollWidth进行比较，具体取决于哪个元素有触发器。）

如果孩子的scrollWidth高于其父母，则表示.text-ellipsis处于有效状态。

当event是父元素

时

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

当event是子元素

时

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

Answer 11

我的实现）

const items = 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}`;
  const text = ctx.measureText(el.innerText);
  return text.width > widthEl;
}

.item{
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

      <div class="item">Short</div>
      <div class="item">Loooooooooooong</div>

Answer 12

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; } }解决方案并不总是有效。

如果您要使用纯JavaScript，建议您使用以下代码：

（打字稿）

        SimpleDateFormat obj_dateFormat = new SimpleDateFormat("dd/MM/yyyy");
        Calendar calender = Calendar.getInstance();

        //get valueFrom
        String valueFrom = obj_dateFormat.format(new Date(calender.getTimeInMillis()));

         //Add 2 days in current time
        calender.add(Calendar.DAY_OF_MONTH, 2);

        //get valueTo
        String valueTo = obj_dateFormat.format(new Date(calender.getTimeInMillis()));

Answer 13

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

const elems = document.querySelectorAll('span');
elems.forEach(elem => {
  checkEllipsis(elem);
});

function checkEllipsis(elem){
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const styles = 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 {
    display: block;
    border: 1px solid black;
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

 <span class="cat">Small Cat</span>
      <span class="cat">Looooooooooooooong Cat</span>

Answer 14

GSM Technical Specification提到的演示http://jsfiddle.net/brandonzylstra/hjk9mvcy/中存在一些错误任务。

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

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

Answer 15

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

HTML文本溢出省略号检测

15 个答案:

跨浏览器兼容性