Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio 1.10.15

Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio

El mostrar los típicos puntos suspensivos para indicar que hay más texto del mostrado es algo sencillo de lograr utilizando sólo Css. Todo se reduce al uso de la declaración text-overflow: ellipsis; en una caja con tamaños fijado e impidiendo su desborde.

Por si eres nuevo en el blog, lo veíamos allá por Mayo de 2012 en el artículo Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras.

Con posterioridad también publicaba algunas variaciones con sus demos a este recurso:

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

En esa demo los puntos suspensivos o ellipsis sólo aparecen en caso de que la longitud del texto alcance o supere el número de líneas fijadas.

Rellenar con puntos o guiones el espacio libre de la última línea

En ese artículo se muestra cómo rellenar el hueco libre de la última línea, sin importar que sea la primera, segunda o enésima, como puedes ver en la imagen siguiente:

Pero hay una variante que no me había planteado por mi poca imaginación o porque nunca me había encontrado con ella. Esta es el mostrar los puntos suspensivos al inicio de la línea (a la izquierda) en vez de a la derecha.

Me topé con este pequeño reto en un artículo del Blog de Hugo Giraudel donde en un comentario el lector Michael Godwin aporta una solución de lo más elegante cuando se trata de mostrar sólo la última línea del texto.

See the Pen NPNZRx by Godwin (@Godwin) on CodePen.

Ver Fork a Full

Tiene algún pequeño inconveniente, como el necesitar de un elemento span extra y algunas líneas de Css... pero la solucción es elegante y funcional.

Ellipsis con múltiples líneas

En los comentarios de post de Hugo otro lector pide lograr lo mismo pero mostrando más de una línea de texto.

Y como ya han pasado varios días desde ello y nadie ha posteado una solucción aquí va la mía:

See the Pen Reverse Ellipsis multiline by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Como ves todo se reduce a que el contenedor del párrafo tenga una altura máxima de igual valor a la altura de línea del párrafo multiplicada por el número de líneas de texto que queramos mostrar como máximo.

Para que se vean las últimas líneas del párrafo en vez de las primeras aplico una transformación al contenedor padre transform: rotate(180deg); que anulo para todo lo contenido en él.

Esta contratransformación además de mostrar las últimas líneas presenta el texto sin efecto espejo.

Los puntos suspensivos al inicio de la primera línea para indicar que hay texto precedente los crea p::after { content: '...';.

Y para que se coloque al inicio de la primera línea de texto mostrada lo posicionamos a la izquierda y respecto al fondo un valor igual a la altura máxima del padre del texto menos una vez su altura de línea.

El resto son declaraciones, incluidos los fondos heredados, para que luzca un poco mejor la demo.

Si te preguntas que por qué no me ahorro el paso de la transformación, declarando una altura al padre del texto y posicionando el texto en bottom: 0 es por una sencilla razón: los puntos suspensivos se verían siempre con independencia que el número de líneas formadas fuese menor a las que queremos mostrar.

Ampliado

Si te ha dado por jugar con la demo del artículo verás que tiene un pequeño fallo: Si las líneas de texto conformadas son exactamente igual al valor marcado para la ellipsis la muestra perdiéndose los primeros caracteres del texto. Sin importar que al final de la última línea haya espacio libre.

¿Lo arreglamos?

El evitarlo es más sencillo de lo que parece, y fue un detalle en el que no caí al momento de publicar el post.

La solucción más sencilla y funcional con independencia del tamaño total (número de líneas) del párrafo es utilizar su otro pseudoelemento ::before al inicio de la 1ª línea como elemento display-inline dimensionado y con fondo. Le damos un valor a z-index mayor que el pseudoelemento que muestra la ellipsis.

Como el ::before está al inicio de ella fuerza un espacio suficiente para desplazar el inicio del texto en la primera línea más allá de lo que tapan los tres puntos. Este efecto sólo afecta a la primera línea.

See the Pen Reverse Ellipsis multiline II: mejorado by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Añade texto al último párrafo (el que tiene el contenido editable) para aumentar o disminuir las líneas formadas y verlo en funcionamiento.

En la demo opté por marcar la primera línea con el carácter ► para hacer más notorio el efecto y remarcar visualmente cuando se muestra todo el texto (la primera línea) y cuando no. Pero nada te impide dejarlo en blanco.

Kseso

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