如何使用jQuery检查行数#

Question

示例:宽度为30px的div,单词"this is text".让我们说,因为宽度很窄,它在页面上呈现如下:

这
是
文字

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

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

谢谢!

Answer 1

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

首先,建立一个"牺牲"容器<div>.用已知数量的文本行填充,每行一个字符,并将其放在远离屏幕的位置:

// calculate height per line
$calcdiv = $('<div/>').css({
  width: '50px',
  position: 'absolute', // don't affect layout
  left: '-2000px' // position far off=screen
}).html('A<br />B<br />C<br />D<br />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/