如何使用jQuery检查行数＃

示例：宽度为30px的div，单词“this is text”。 让我们说，因为宽度很窄，它在页面上呈现如下：

这个
是
文本

（3行）。 有没有一种方法可以告诉jQuery渲染到页面需要多少行？ 例如， $("#container").lineCount() 。

商业目的：如果我的内容超过一定数量的行，我想操纵它以便不显示滚动条，但我也有一个固定的高度，所以我不想乱用溢出的CSS支柱。

谢谢！

Answer 1

这很棘手，但即使没有指定的行高或其他样式，也可以完成。 它确实涉及一堆活动部件。

首先，构建一个“牺牲”容器

。 用已知数量的文本行填充，每行一个字符，并将其放在远离屏幕的位置：

 // calculate height per line $calcdiv = $('
').css({ width: '50px', position: 'absolute', // don't affect layout left: '-2000px' // position far off=screen }).html('A
B
C
D
E'); // add five lines $('body').append( $calcdiv ); // make the browser render it var lineHeight = $calcdiv.height()/5; // average height per line 

现在我们知道这个浏览器渲染的线的近似高度（以像素为单位）。 我们将注意力转向要测量的方框：

 $origDiv = $('div#div_to_measure'); $measureDiv = $origDiv.clone(); // clone it $measureDiv.css({ position: 'absolute', left: '-1000px', // position far off-screen height: 'auto' // let it grow to its natural full height }); $('body').append( $measurediv ); // add it to the DOM, browser will render it 

…如果允许达到浏览器呈现的自然尺寸，我们现在知道框中的大致行数：

 var numLines = $measureDiv.height() / lineHeight; 

我们必须clone()因为要测量的原始框的高度可能受当前页面样式和布局的限制。

现在一些清理：

 $calcdiv.remove(); $measureDiv.remove(); 

这是一个例子： http ： //jsfiddle.net/redler/FuWue/