HTML文本溢出省略号检测

HTML text-overflow ellipsis detection

本文关键字：检测 省略号 溢出 文本 HTML      更新时间：2023-09-26

我的页面上有一些元素的CSS规则white-space, overflow, text-overflow设置，因此溢出的文本被修剪并使用省略号

div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border: 1px solid black;
  width: 150px;
  margin: 5px;
  padding: 5px;
  font-family: sans-serif;
}
<div>
  <span>Normal text</span>
</div>
<div>
  <span>Long text that will be trimmed text</span>
</div>

是否有任何方法我可以使用JavaScript来检测哪些元素的内容溢出?

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

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

曾经有一段时间我需要这样做，我遇到的唯一跨浏览器可靠的解决方案是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来演示，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/

希望这有助于，因为它是hackky。

添加到italo的答案，您也可以使用jQuery。

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

此外，正如Smoky指出的那样，您可能希望使用jQuery的outerWidth()而不是width()。

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

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

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

这个示例显示了截断文本的单元格表上的工具提示。是动态的基于表宽度:

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

elem。偏移宽度VS ele.scrollWidth这对我有用!https://jsfiddle.net/gustavojuan/210to9p1/

$(function() {
  $('.endtext').each(function(index, elem) {
    debugger;
    if(elem.offsetWidth !== elem.scrollWidth){
      $(this).css({color: '#FF0000'})
    }
  });
});

我的实现)

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>

所有的解决方案都不适合我，所做的工作是将元素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);
}

如果你在做反应，我是这样做的。

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

添加到@Дмытрык答案，缺少边框和填充的扣除功能齐全!!

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);
  let extra = 0;
  extra += parseFloat(styles.getPropertyValue('border-left-width'));
  extra += parseFloat(styles.getPropertyValue('border-right-width'));
  extra += parseFloat(styles.getPropertyValue('padding-left'));
  extra += parseFloat(styles.getPropertyValue('padding-right'));
  return text.width > (widthEl - extra);
}
.item{
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
      <div class="item">Short</div>
      <div class="item">Loooooooooooong</div>

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

getClientRects work like 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 work like this

你可以像这样检测

这些解决方案都不适合我，所以我选择了一个完全不同的方法。我没有使用带有省略号的CSS解决方案，而是从特定的字符串长度中剪切文本。

  if (!this.isFullTextShown && this.text.length > 350) {
    return this.text.substring(0, 350) + '...'
  }
  return this.text

and show "more/less"

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

对于使用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

如果您使用line-clamp>= 2 line在多个行中添加省略号，则可以使用此条件:

if (
      descriptionElement &&
      descriptionElement.offsetHeight < descriptionElement.scrollHeight
    ) {
      // has text-overflow
    }

在比较offsetWidth>scrollWidth。

W3C有一个返回元素的遗留API。scrollWidth值为舍入值，这导致在某些情况下比较返回false。如果元素宽度为150px, scrollWidth为150.4px(四舍五入到150)，那么即使浏览器在文本中显示省略号，该检查也将返回false。

他们试图更新返回小数像素的api，但由于webcompat，它被还原了。

有一个解决方案使用max-content和getClientRects()。 下面是我使用onMouseEnter的示例代码。请注意，这只适用于如果容器的边界是可用宽度的100%(所以如果你使用flexx，你的容器必须是flex: 1例如。

hasEllipsis(elementItem) {
    let scrollWidth = elementItem.scrollWidth;
    
    elementItem.style.width = 'max-content';
    const itemRects = elementItem.getClientRects();
    if (itemRects.length > 0 && itemRects[0].width > scrollWidth) {
        scrollWidth = itemRects[0].width;
    }
    elementItem.style.width = 'auto';
    return scrollWidth > elementItem.clientWidth;
}

的文章:https://bugs.chromium.org/p/chromium/issues/detail?id=980476

https://github.com/w3c/csswg-drafts/issues/4123

解决方案@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>

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

在他的演示中，添加这些代码将工作: 
setTimeout(() => {      
  console.log(EntryElm[0].offsetWidth)
}, 0)
相关文章：