jQueryを使用して行数を確認する方法

Question

例：単語が "this is text"である幅30pxのdiv。幅が狭いので、それはこのようなページにレンダリングする、としましょう：

この
がある
テキスト

（3行）。ページにレンダリングするのに必要な行数をjQueryに伝える方法はありますか？たとえば、$("#container").lineCount()のようなものです。

ビジネス目的：コンテンツが特定の行数を超えている場合は、スクロールバーが表示されないように操作したいが、固定高さもあるのでオーバーフローCSSを混乱させたくない小道具

ありがとうございます！

Answer 1

これは難しいことですが、指定された行の高さなどのスタイルがなくても実行できます。それは可動部分の束を伴います。

まず、「犠牲的な」コンテナ<div>を作成します。テキストの行の既知の数、1つの文字ごとにそれを記入し、はるかにオフスクリーンにそれを置く：

// 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()にする必要があります。

現在、いくつかのクリーンアップ：http://jsfiddle.net/redler/FuWue/