Cómo verificar el # de líneas usando jQuery

Question

Ejemplo: un div con un ancho de 30px con las palabras "esto es texto". Digamos que, puesto que la anchura es, da lugar en la página de la siguiente manera:

este
es
texto

(3 líneas). ¿Hay alguna manera en jQuery de decir cuántas líneas se necesitan para renderizar en la página? Por ejemplo, algo como, $("#container").lineCount().

Propósito comercial: si mi contenido excede un cierto número de líneas, quiero manipularlo para que no aparezca una barra de desplazamiento, pero también tengo una altura fija, así que no quiero meterme con el desbordamiento css apuntalar.

Gracias!

Answer 1

Esto es complicado pero se puede hacer, incluso si no se especifica una altura de línea u otro estilo. Incluye un montón de partes móviles.

Primero, construya un contenedor "sacrificial" <div>. Rellenar con un número conocido de líneas de texto, un carácter cada uno, y colocarlo lejos de pantalla:

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

Ahora sabemos la altura aproximada de una línea, en píxeles, como dictada por este navegador. Nos dirigimos nuestra atención a la caja a medir:

$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 

... y ahora sabemos el número aproximado de líneas en la caja si se le permite alcanzar sus dimensiones naturales como dictada por el navegador:

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

Tenemos que clone() porque la caja original a medir puede tener su altura restringida por los estilos y el diseño de la página actual.

Ahora algo de limpieza:

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

He aquí un ejemplo: http://jsfiddle.net/redler/FuWue/