soy Kseso y esto EsCSS

Text-overflow:ellipsis en cualquier línea elegida a voluntad y puntos suspensivos sólo en ella

El corte de texto y la adicción de puntos supensivos con Text-overflow:ellipsis sólo funciona para una sóla línea. Pero es posible emularlo para cualquier nº de líneas con puro Css

Text-overflow:ellipsis en cualquier línea elegida a voluntad y puntos suspensivos sólo en ella

·Por Kseso ✎ 1

Corte de texto en la línea elegida avoluntad y puntos suspensivos sólo en ellaHola Buenos días. Quisiera hacer un párrafo de texto que tenga espacio para poner 4 lineas de texto. Lo que necesito es que el texto muestre puntos suspensivos si la cantidad de caracteres supera esas 4 lineas. No se si se entendió.
Con la propiedad 'text-overflow:ellipsis' los puntos suspensivos aparecen pero solo generando una linea de texto.
¿Es posible hacer un párrafo de 4 lineas y que recién ahi aparezcan los puntos suspensivos?

Muchas gracias. Paola.

No es la primera vez que alguien pregunta esto en este blog o en otras partes. Y tiene razón quien lo pregunta al afirmar que la propiedad text-overflow:ellipsis tiene ese comportamiento.

También es cierto que de momento hasta donde yo recuerdo no hay una propiedad en css que permita apuntar a una determinada línea de un párrafo (excepto :first-line) y actuar en consecuencia.

Pero también es cierto, y ya lo he afirmado en varias ocasiones, que lo que Css no da la imaginación presta.

Corte de párrafo por cierta línea y puntos suspensivos...

El pequeño divertimento de hoy consiste en eso, forzar el corte de los párrafos (o cualquier otro elemento que contenga texto) en una línea a voluntad y mostrar los típicos puntos suspensivos sólo a partir de que tenga ese número de líneas como mínimo.

El enlace al pen de la demo por si no carga.

See the Pen Corte de párrafo y ... a voluntad by Kseso (@Kseso) on CodePen.

La estructura Html

En la demo he elegido el supuesto de una caja contenedora (un article) con un párrafo (p) para que sea éste el que sufra el corte con independencia de que haya otros elementos antes y/o después de él:

<article> <h2>Un elemento previo no cuenta</h2> <p>El texto muestre puntos suspensivos si la cantidad de caracteres supera las 4 lineas.</p> <a href=''>Un enlace</a> </article>

Imaginación creativa. El Css

Para hacerlo posible tenemos que controlar la altura height del párrafo para "cortar el sobrante" con la propiedad apropiada overflow y que en caso de poco texto no se cree espacio vacío al final. La propiedad indicada es max-height.

Para poder mostrar el número de líneas de texto que nos interese en una altura del párrafo determinada tenemos que controlar la altura de línea line-height.

Controlando las dos variables anteriores (altura de línea y número de líneas a mostrar) sólo necesitamos multiplicar esos valores. Será el que declaremos a la propiedad max-height.

Para crear los puntos suspensivos tiramos del pseudoelementos ::after del párrafo posicionado de forma absoluta. El párrafo que ha de estar con posición ≠ static, lo acertado es que sea relative.

La colocación del pseudoelemento como es lógico será a la derecha del párrafo (right). Pero no relativa al fondo (bottom). Como no queremos que se muestren si el párrafo tienes menos de las líneas elegidas lo posicionamos respecto al top. Y el valor será no el mismo de 'max-height' sino que tenemos que restarle una vez la altura de línea del párrafo para que se coloquen los tres puntos corréctamente.

El toque final es declarar un fondo al pseudoelemento igual que el que se vea bajo él para evitar que se muestre texto tras los tres puntos.

Por cierto, el texto estará justificado. La razón es obvia y si no la ves prueba a cambiarla.

Todo esto puesto junto y en código quedaría así para las 4 líneas que indicaba la consulta:

article { background: #FFEEAA; width:/*la necesaria*/; margin: 2rem auto;/*no influye*/ line-height: 1.5rem; } p { max-height: 6rem;/*line-height por nº de líneas*/ overflow: hidden; text-align: justify; } p::after { content:'...'; background: #FFEEAA; position: absolute; top: 4.5rem;/*max-height menos 1 line-height*/ right: 0; }

Fixed Todo funcionará estupendamente salvo en un caso: que el párrafo cree exactamente el número de líneas que queremos mostrar y que la última línea no esté completa. Se mostrarán los tres puntos a la derecha separados un amplio espacio entre la última letra del párrafo y ellos.
Situación resuelta por Furoya en su respuesta al comentario que dio origen a este artículo: Multiline text with fake overflow ellipsis in last broken line.

También puede suceder que la última letra que se ve de la última línea se muestre incompleta al superponer sobre ella el pseudoelemento.

Esta demo, aunque usable, debería ser empleada si no tienes manera de controlar la cantidad de texto a mostrar en el resumen. En caso de que generes dicho texto con algún lenguaje de programación lo más acertado es que sea mediante programación que generes el texto de longitud apropiada y añadas justamente tras él los puntos suspensivos.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso