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

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

示范

当然这只适用于一个元素,overflow:hidden;text-overflow:ellipsis但是当没有时它很容易适应text-overflow:ellipsis:只需删除+"…".

请注意,这与所有浏览器兼容并提供准确的结果(w3.org指定该…字符将由浏览器使用).

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个字符的错误(奇怪的字体或边缘情况),但大多数情况下,它工作正常.

希望有所帮助!