如何檢查使用jQuery的行數＃

Question

例如：寬度爲30px的單詞「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/