jquery - 如何使用 jQuery 检查行数

Question

示例:宽度为 30px 的 div，带有“这是文本”字样。假设，由于宽度很窄，它在页面上的呈现如下:

这个
是
文字

(3 行)。 jQuery 有没有办法告诉需要多少行渲染到页面？例如，$("#container").lineCount().

商业目的:如果我的内容超过一定行数，我想对其进行操作，以便不出现滚动条，但我也有固定的高度，所以我不想弄乱overflow css prop .

谢谢!

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/