Textos truncados con Css: hyphens y reverse ellipsis multilínea 14.9.17
Artículo recopilatorio de técnicas y propiedades Css para truncar textos. Ya sea separar palabras entre líneas distintas o recortar el texto mostrado (ya sean las líneas iniciales o las finales) y añadir los puntos suspensivos para indicar que hay más texto no mostrado en cualquier línea (y no sólo en la primera).
Textos truncados con Css: hyphens y reverse ellipsis multilínea
Para Css todos los elementos del documento al que aplica generan/son una caja que los encierra o contiene y sobre el que actúan los estilos. Así es desde una simple letra en medio de la página hasta el viewport
en el que se representa.
Lógicamente las particularidades de cada caja varían en función del tipo de elemento de que se trate así como también las propiedades Css que admiten y el cómo se relacionan o influyen con las otras cajas adyacentes.
Esta concepción es la base de Css y se conoce como el modelo de caja o Css box-model.
Este modelo también es de aplicación a los elementos textuales. Así, cada vez que escribes un texto, lo que estás haciendo, para css, es poner unas cajas anónimas al lado de otras:
█ ⌷ ☐ ⌷ ⌷ ☐ ⌷ ☐ ⌷ ☐ ⌷ ☐
Para manejarse con estos elementos textuales y su contenido (letras, palabras...) Css ha ido desarrollado desde sus inicios una serie de propiedades englobadas en distintos documentos. Principalmente en los documentos CSS Text
y Css Fonts
.
Pero tradicionalmente Css siempre tuvo dos carencias a la hora de manejar el texto sobrante:
- Corte de palabras entre líneas.
- Gestión del número de líneas de texto mostradas.
Corte de palabras: hyphens y overflow-wrap / word-wrap
Por defecto si una palabra no cabe entera en su línea pasa a la siguiente, dejando ese espacio vacío en la línea. A quienes no les gusta este comportamiento y la desalineación del texto asociada en el final de líneas hace que fuercen la alineación del texto en ambos extremos de las líneas con text-align: justify
Sin embargo esta práctica está desaconsejada para grandes bloques de texto por legibilidad y accesibilidad.
Así que para evitar esos espacios vacíos al final de las líneas de texto dejados por palabras más largas que el espacio disponible Css define la propiedad hyphens y asociadas como overflow-wrap/word-wrap
Son las encargadas de repartir una misma palabra (o cadena textual sin espacios en blanco) entre dos líneas o más y el cómo lo debe hacer el navegador.
Sin embargo la propiedad hyphens se encontró con un gran escollo tras su lanzamiento: Chrome que comenzó dándole soporte con algún que otro bug se lo retiró y hasta hoy. Eso ha hecho que su uso y evolución queden estancados.
Elipsis: Puntos suspensivos automáticos
Css define la propiedad text-overflow con el valor ellipsis para limitar el número de líneas generadas y añadir los tres puntos suspensivos para indicar que hay más texto no mostrados.
See the Pen native ellipsis by Kseso (@Kseso) on CodePen.
Tienes ampliado estos aspectos en el artículo "Guiones - y puntos suspensivos... automáticos con Css"
Sin embargo tiene una serie de particularidades que hay que tener presentes en su uso. Entre otras:
- Hay que complementarla con
overflow: hidden; - Hay que impedir la creación de nuevas líneas:
white-space: nowrap; - Y la más limitante: sólo muestra una única línea. No es posible generar los puntos suspensivos en otra línea elegida a voluntad que no sea al final de la primera.
Esta última limitación del Css estándar puede ser superada por varias vías. Entre otras con propiedades privativas (no es Css) de algún navegador o con un poco de imaginación.
-webkit-line-clamp
Los chicos de Chrome en su desarrollo particular del flexbox definieron una propiedad privativa para truncar un texto en cualquiera de sus líneas: -webkit-line-clamp
See the Pen jbprmm by Kseso (@Kseso) on CodePen.
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;/*si no se declara añade los ... pero muestra todo el texto*/
}
Demasiado no-Css
como para poder tenerlo presente en cualquier realización.
-o-ellipsis-lastline
Para Opera también hay más no-Css
que permite añadir los puntos suspensivos en cualquier línea. En este caso el no-valor
que los genera es -o-ellipsis-lastline limitando la altura de la caja. Ver demo sólo en Opera.
.ellipsis-lastline {
line-height: 1.5rem;
height: 5.5rem;
overflow: hidden;
text-overflow: -o-ellipsis-lastline;
}
Texto truncado y elipsis en cualquier línea
Es relativamente sencillo lograr que un texto se corte en una determinada línea elegida a voluntad y que al final del texto mostrado añada la elipsis o tres puntos suspensivos.
See the Pen Text-overflow:ellipsis in any line by Kseso (@Kseso) on CodePen.
Para los usuarios veteranos y habituales del blog esta demo ya le es conocida. El pen aquí mostrado es una pequeña variación del construido para el artículo "Text-overflow:ellipsis en cualquier línea elegida a voluntad y puntos suspensivos sólo en ella".
En ese artículo tienes la explicación detallada sobre cómo conseguirlo.
Reverse Ellipsis multiline
Hay otro caso de truncado de texto y su elipsis asociada que tampoco es recogido por Css de una forma directa: mostrar las últimas líneas cortando el inicio del texto y añadir los puntos suspensivos al inicio de la primera línea vista.
Como siempre, aquí viene al pelo un viejo mantra de este blog:
Lo que Css no da la imaginación lo presta.
See the Pen Reverse Ellipsis multiline II: mejorado by Kseso (@Kseso) on CodePen.
Sí. También es posible que esta situación y su demo te suene y la reconozcas.
Ya hace un tiempo, Diciembre de 2014, fue el motivo del artículo "Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio". En él tienes todas las explicaciones para que puedas adaptar la demo a tu caso particular.
 y añadir los puntos suspensivos para indicar que hay más texto no mostrado en cualquier línea (y no sólo en la primera).){kind=link}
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
Gracias por la información, me fue de gran utilidad.
ResponderEliminarMuchas gracias
ResponderEliminar