soy Kseso y esto EsCSS

Textos truncados con Css: hyphens y reverse ellipsis multilínea

Textos truncados con Css: hyphens y reverse ellipsis multilínea

·Por Kseso ✎ 0
Textos truncados con Css

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:

  1. Corte de palabras entre líneas.
  2. 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.

Ver y editar Demo

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.

Ver Demo

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.

avatar del Editor del blog

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 Don Kseso Kseso