Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras 4.5.12

Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras

Caso: Palabras o cadena de texto de longitud tal que debido al aumento en el número de dispositivos de pantallas reducidas y su uso es imposible predecir si va a tener espacio suficiente para mostrarse en su línea de texto.
Inicialmente o desbordaba su caja de contenido o escondías el sobrante ( overflow ).
Posteriormente se pudo optar por el corte (aleatorio) de la palabra o de la cadena ( word-wrap ), pero sin indicación visual ninguna que indicase que la palabra continuaba en la siguiente línea ( el típico guión: - ) o que había más texto no mostrado ( puntos suspensivos: ... ).

Pues YA PUEDES

word-wrap es una propiedad ya muy, muy veterana y utilizada. Al establecer su valor en break-word se le dice al navegador que divida las palabras donde sea necesario y quiera a fin de evitar el desbordamiento de texto. Lamentablemente por ella sola no se inserta nada que lo indique, dificultando la lectura y su comprensión.

Por no se qué razón, en el último documento sobre el texto del consorcio "CSS Text Level 3" a la propiedad word-wrap la llaman overflow-wrap . A día de hoy no conozco ningún navegador o versión que de soporte a ésta última. Sin embargo con word-wrap podríamos decir que "ninguno" tiene problemas. Pero como su estatus es de borrador, quizás cambie de nuevo cómo la llaman.

Puntos suspensivos automáticos

Mira el texto siguiente, contenido en un párrafo de medidas acortadas, y haz :hover sobre él:

Insertando puntos suspensivos automáticamente con CSS

white-space:nowrap & text-overflow: ellipsis

Las dos declaraciones responsables de la aparición de los puntos suspensivos son white-space:nowrap y text-overflow: ellipsis .

Guiones al final de la línea en palabras cortadas

Fíjate en los guiones que aparecen en las palabras separadas por no caber en la línea. Mira el código y verás que quien los inserta es el propio css

“Contaba mi abuela Manuela, "queenciertaocasiónunavez", cuando el Egido Nuevo era todavía "unamatademontequequetevoyacontaratí" llegaba "porlomenosalhuertosuyo", "unanochecerradacuandomásbrillabaelsol" de Cabeza Caballo regresaba "eltamborilerodelpueblode" Villasbuenas.
Que por aquello que pasa, entre la raya y el cruce, "pasódeapenasver" por donde iba a no "vernilasorejasdelburro" que lo traía.

Disculpas obligadas por la falta de espacios en blanco para forzar la aparición de los guiones. El html es el siguiente:

hyphens:auto & word-wrap:break-word

La propiedad hyphens "controla si se permite la partición de palabras para crear más oportunidades de ruptura dentro de una línea de texto".
Combinada con word-wrap podemos forzar no sólo que un texto no desborde su caja contenedora sino que las palabras se separen entre líneas e insertando un guión para indicar continua en la siguiente línea:

Hoy por hoy el soporte depende de las características tanto del navegador/versión utilizado como del idioma. Cada idioma establece unas reglas en las particiones de las palabras.

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