我试图从一个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个字符的错误,但大多数情况下,它工作得很好。
希望有帮助!