¿Descanso de palabra más inteligente en CSS?

Si acabo de poner word-break: break-all sobre un elemento, a menudo terminan con esto:¿Descanso de palabra más inteligente en CSS?

Hola gente, estoy escribiendo un mes
salvia que es demasiado largo para caber!

Obviamente esto sería mucho mejor como:

Hola gente, estoy escribiendo un mensaje
que es demasiado largo para caber!

Pero al mismo tiempo, si alguien escribe:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!

Entonces yo quiero que sea:

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!

Parece que no puedo encontrar la manera de hacerlo.

Tenga en cuenta que el ancho del elemento no es fijo y puede cambiar.

Fuente

2012-10-02 Niet the Dark Absol

Prueba 'word-break: normal; word-wrap: break-word'? (No uso CSS por encima de un nivel muy primitivo, o sé cómo se maneja, pero "parece que podría funcionar". –

Pruebe word-wrap: break-word; debe comportarse como usted espera.

Fuente

2012-10-02 23:21:02

¡Perfecto! ¡Gracias! –

'word-break: break-word' no es estándar para webkit, teniendo el mismo problema que op [this] (http://stackoverflow.com/questions/14190420/firefox-word-break-breaks-short-words-at-random-points/14191114#14191114) la respuesta lo resuelve. – Drust

El correcto es 'word-wrap: break-word;' – aTei

Para saltos de palabras inteligentes, o correctos saltos de palabras en primer lugar, necesita reglas que dependen del idioma. Para el inglés y muchos otros idiomas, la ruptura correcta significa separación silábica, con un guión agregado al final de una línea cuando ocurre una ruptura.

En CSS, puede usar hyphens: auto, aunque la mayoría todavía necesita duplicarlo utilizando prefijos de proveedor. Como esto no funciona en IE 9, puede considerar la separación silábica basada en JavaScript como Hyphenate.js. En ambos casos, es esencial utilizar el lenguaje de marcado (atributo lang).

Romper cadenas largas y no herméticas es un problema diferente. Se manejarían mejor en preprocesamiento, pero en una configuración simple, word-break: break-word (que significa incorrecto rotura de palabras, en inglés, por ejemplo) puede considerarse como una emergencia.

Fuente

2012-10-03 05:46:15

Para muchos de nuestros proyectos en los que por lo general Añadir este cuando sea necesario:

.text-that-needs-wrapping { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -ms-word-break: break-all; 
    word-break: break-word; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    hyphens: auto; 
}

Maneja situaciones más extrañas con diferentes navegadores.

Fuente

2018-02-16 15:47:29

¿Descanso de palabra más inteligente en CSS?

Respuesta

Cuestiones relacionadas