Cómo verificar el número de líneas usando jQuery

Ejemplo: un div con un ancho de 30px con las palabras “esto es texto”. Digamos que, dado que el ancho es estrecho, se representa en la página de esta manera:

esta
es
texto

(3 líneas). ¿Hay alguna manera en jQuery de decir cuántas líneas se necesitan para renderizar a 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, por lo que no quiero meterme con el desbordamiento de prop css.

¡Gracias!

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

Primero, construye un contenedor “sacrificial”

. Rellénelo con un número conocido de líneas de texto, con un carácter cada una, y colóquelo lejos de la pantalla:

 // calculate height per line $calcdiv = $('
').css({ width: '50px', position: 'absolute', // don't affect layout left: '-2000px' // position far off=screen }).html('A
B
C
D
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, tal como la representa este navegador. 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 el cuadro si se nos permite alcanzar sus dimensiones naturales tal como las representa el navegador:

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

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

Ahora un poco de limpieza:

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

Aquí hay un ejemplo: http://jsfiddle.net/redler/FuWue/