Jak sprawdzić # linii przy użyciu jQuery

Question

Przykład: element div o szerokości 30 pikseli ze słowami "to jest tekst". Powiedzmy, że ponieważ szerokość jest wąska, to czyni na stronie tak:

to
jest
tekst

(3 linie). Czy istnieje sposób w jQuery, aby powiedzieć, ile linii zajmuje renderowanie na stronie? Na przykład coś podobnego, $("#container").lineCount().

Cel biznesowy: jeśli moja zawartość przekracza pewną liczbę wierszy, chcę ją zmanipulować, aby pasek przewijania się nie pojawił, ale mam też stałą wysokość, więc nie chcę zepsuć css rekwizyt.

Dzięki!

Answer 1

Jest to trudne, ale można to zrobić, nawet jeśli nie ma określonej wysokości linii lub innego stylu. Zawiera sporo ruchomych części.

Najpierw zbuduj kontener "ofiarny" <div>. Wypełnić go z określonej liczbie wierszy tekstu, jeden znak każdego, i umieścić go daleko poza ekranem:

// 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 

Teraz znamy przybliżoną wysokość wiersza, w pikselach, wydanego przez tę przeglądarkę. Zwracamy uwagę na pola, aby mierzyć:

$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 

... a teraz znamy przybliżoną liczbę wierszy w oknie jeśli jest to dozwolone, aby osiągnąć swoje naturalne wymiary jak renderowane przez przeglądarkę:

var numLines = $measureDiv.height()/lineHeight; 

Musimy clone(), ponieważ oryginalne pole, które ma zostać zmierzone, może mieć ograniczoną wysokość przez bieżące style i układ strony.

Teraz niektóre porządki:

$calcdiv.remove(); 
$measureDiv.remove(); 

Oto przykład: http://jsfiddle.net/redler/FuWue/