有没有办法通过jQuery抓取CSS截断的文本?

Is there any way to grab the CSS truncated text via jQuery?

本文关键字：文本 CSS 抓取 jQuery 有没有      更新时间：2023-09-26

我试图从一个CSS截断元素抓取HTML，似乎不能得到它的权利。

例如:

<span id=mySpan style=white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50px>This is the contents of the span tag.  It should truncate with an ellipsis if it is longer than 50px.</span>

如果我使用标准的jQuery方法抓取HTML，我得到的是全文，而不是截断的版本。我甚至不确定这是否可能。

html = jQuery('#mySpan').html();
text = jQuery('#mySpan').text();

都返回全文。我一头雾水。

你可以计算:

$.fn.renderedText = function(){
  var o = s = this.text();
  while (s.length && (this[0].scrollWidth>this.innerWidth())){
    s = s.slice(0,-1);
    this.text(s+"…");
  }
  this.text(o);
  return s;
}
var renderedText = $("#mySpan").renderedText(); // this is your visible string

示范

当然，这只适用于具有overflow:hidden;text-overflow:ellipsis的元素，但当没有text-overflow:ellipsis时，很容易适应:只需删除+"…"。

请注意，这与所有浏览器兼容，并给出确切的结果(w3.org指定浏览器将使用…字符)。

@dystroy给出了一个很好的答案，这里有另一种(更未来友好的)方法来做到这一点。

可以使用document.caretPositionFromPoint。这几乎只是一个FF函数，但大多数其他浏览器都以自己的函数名和API提供了相同的功能。不，我不知道浏览器对开发者有什么不利，但是…

我们的方法是这样的:

  • 选择元素
  • 获取客户端位置边界
  • 将其放入上述函数中以获取文本偏移位置
  • 减去3，从偏移
    • 中删除省略号。
  • 根据textContent属性的偏移量提取文本

下面是一个快速的演示(应该在Webkit和Gecko中正常工作):

function getRenderedText (el) {
  var pos = el.getBoundingClientRect();
  var offset, range;
  if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(pos.right, pos.top);
    offset = range.endOffset - 3;
  }
  else if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(pos.right, pos.top);
    offset = range.offset - 3;
  }
  else {
    console.error('Your browser is not supported yet :(');
  }
  return el.textContent.slice(0, offset);
}
console.log(getRenderedText(el));
span {
  text-overflow: ellipsis;
  width: 40px;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}
<span id="el">foo bar is so much awesome it is almost the bestest thing in the world. devs love foo bar. foo bar all the things!</span>

在某些情况下(奇怪的字体或边缘情况)，我看到了最大1个字符的错误，但大多数情况下，它工作得很好。

希望有帮助!

相关文章：