Question

我试图从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();

两者都返回全文。我很难过。

Answer 1

你可以计算它：

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

Demonstration

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

请注意，这与所有浏览器兼容，并提供准确的结果（the w3.org specifies that the … character is to be used by the browser）。

Answer 2

@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个字符的错误（奇怪的字体或边缘情况），但大多数时候，它工作正常。

希望有所帮助！

有没有办法通过jQuery获取CSS截断文本？

2 个答案: