not - word wrap css

¿Un salto de palabra más inteligente en CSS?

Question

Si acabo de poner word-break: break-all en un elemento, a menudo termino con esto:

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

Obviamente, esto sería mucho mejor ya que:

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

Pero al mismo tiempo si alguien escribe:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!

Entonces me gustaría que sea:

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!

Parece que no puedo encontrar una manera de hacer esto realmente.

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

Answer 1

Para los saltos de palabras inteligentes, o para los saltos de palabras correctos en primer lugar, necesita reglas dependientes 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 en su mayoría aún necesita duplicarlo usando prefijos de proveedores. Como esto no funciona en IE 9, puede considerar una división de guiones basada en JavaScript como Hyphenate.js en su lugar. En ambos casos, es esencial utilizar el marcado de idioma (atributo lang ).

Romper cadenas largas y sin guiones es un tema diferente. La mejor manera de manejarlos es en el preprocesamiento, pero en una configuración simple, word-break: break-word (lo que significa una word-break: break-word incorrecta de palabras, en inglés, por ejemplo) puede considerarse una emergencia.

Answer 2

Para muchos de nuestros proyectos, generalmente agregamos esto cuando es 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 la mayoría de las situaciones extrañas con diferentes navegadores.

Answer 3

Prueba word-break: break-word; Debe comportarse como esperas.