¿Cómo recortar texto de longitud desconocida para un cierto número de líneas?

Question

Teniendo en cuenta esto:

<p class="summary">Here is some text, could be 5 words, could be 500 words.</p> 

estoy agarrando la altura párrafo con este código:

var pHeight = $('.summary').height(); 

Y en mi caso, si es mayor que 32, son las tres líneas de largo (que es demasiado largo) En ese caso, quiero recortar el texto e insertar un enlace "Leer más ...". El problema es, ¿cómo averiguo dónde recortar para que el texto solo ocupe dos líneas? Si hubiera alguna forma de tomar el número de caracteres y multiplicarlo por un número que tenga el tamaño de cada letra. Con monoespacio que sería relativamente simple, creo, pero estamos hablando de Arial.

¡Cualquier punto en la dirección correcta sería apreciado, gracias!

Answer 1

No hay buena forma de hacer esto por un par de razones. En primer lugar, diferentes navegadores/plataformas pueden representar las fuentes de forma diferente (por pequeña que sea la diferencia). En segundo lugar, no hay forma de javascript para extraer el tamaño de caracteres individuales de una fuente determinada (AFAIK).

Si estaba implementando algo como esto, simplemente tendría una constante para la longitud más larga permitida y substring. También haría este lado del servidor ya que no tiene sentido enviar datos a un cliente que no vas a utilizar.

Otro método (aunque no lo usaría) sería poner su texto en un div con un ancho y alto establecidos, recortando cualquier desbordamiento con overflow: hidden. Por supuesto, esto puede dejarlo con palabras cortadas parcialmente, así que desaconsejaría.

Answer 2

Yo diría que use algunos trozos de texto genérico diferentes y vea cuántos caracteres se requieren para llegar a dos líneas. Promedia el resultado y redondea para que nunca pases por accidente. Luego, con su texto real, redondea a ese número estimado y su texto se llenará alrededor de 2 líneas.

Answer 3

Si su altura es demasiado alta, simplemente podría poner una 'p' con un fondo blanco sobre la tercera línea y agregar el "Leer más ..." en ella. Y agregue una altura y "desbordamiento: oculto" a su 'p'.

Answer 4

Usaría un expansor de texto jquery. Hay varios por ahí, pero aquí hay un ejemplo: http://plugins.learningjquery.com/expander/ El punto de corte se basa en el recuento de caracteres, pero con algunas pruebas y errores, debería poder encontrar un recuento de caracteres que le proporcione dos líneas.

Answer 5

He estado trabajando con algunos de estos problemas por un tiempo y he aclarado algunas ideas mientras tanto. Es algo caro en código, pero me ha funcionado bien. Hay un problema similar que resuelvo en my blog si sabes español y necesitas algunas ideas de codificación, en este momento solo te guiaré.

Conoces el tamaño del contenedor si debe tener 2 líneas, según la líneaAltura del texto. Entonces imagina que tu contenedor es Ypx alto.

1. Consigue todo el texto desde el contenedor
2. Ponga el contenedor se desborde: automático y establecer max-height: YPx;
3. Empezar a añadir palabra por palabra el texto que agarró por el contenedor
4. Comprobar si el scrollerHeight es menor o igual que YPx
5. seguir añadiendo palabras hasta (4) se convierte en no válida, a continuación, quitar la última palabra que ha añadido.

Como dije, no es muy barato, pero he hecho algunas pruebas y el tiempo que se tarda en hacerlo es lineal, por lo que con pocas palabras será bastante rápido (cuando haga el control de más de 10.000 veces lleva poco menos de un segundo)

Espero que ayude!

Answer 6

He escrito un pequeño plugin jQuery que elimina palabras del contenido hasta que el elemento sea más bajo que una cierta altura. (Y agrega tres puntos al final del contenido.) Esta solución es similar a la de Lomefin. A diferencia de su solución, mi solución está optimizada para situaciones en las que necesita eliminar solo unas pocas palabras.

El código es here.