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/

如何使用jQuery检查行数＃

1 个答案: