有没有办法使用jQuery获得块内容的第5行(第一个字母的偏移量)?
我的意思是可视线,浏览器计算的线,而不是源代码中的线。
jQuery.fn.line = function(line) { var dummy = this.clone().css({ top: -9999, left: -9999, position: 'absolute', width: this.width() }).appendTo(this.parent()), text = dummy.text().match(/\S+\s+/g); var words = text.length, lastTopOffset = 0, lineNumber = 0, ret = '', found = false; for (var i = 0; i < words; ++i) { dummy.html( text.slice(0,i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i+1).join('') ); var topOffset = jQuery('span', dummy).offset().top; if (topOffset !== lastTopOffset) { lineNumber += 1; } lastTopOffset = topOffset; if (lineNumber === line) { found = true; ret += text[i]; } else { if (found) { break; } } } dummy.remove(); return ret; };
$('#someParagraph').line(3); // blah blah blah
示例: http : //jsbin.com/akave
它遍历整个元素(实际上是元素的克隆),并 <span/>在每个单词中插入一个元素。跨度的最高偏移量已缓存- 当此偏移量更改时,我们可以假定我们在新行上。
<span/>