not - ¿Cómo usar guiones CSS automáticos con `word-break: break-all`?

word-break vs word-wrap

Question

Estoy usando word-break: break-all; y quiero saber cómo puedo hacer que el navegador inserte automáticamente los hyphens , como se muestra en un ejemplo de MDN .

div {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border: 1px solid red;
  word-break: break-all;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Tal que el texto se vería así:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

He creado un JSFiddle también.

Esto debe funcionar en IE9 / IE10, pero sería bueno si también funcionara en Firefox y Chrome.

Answer 1

La propiedad -ms-hyphens solo funciona en IE10 +. No es posible en IE9 o inferior.

Consulte la tabla de compatibilidad del navegador en la parte inferior del enlace de referencia que proporcionó.

Todavía no funciona en Chrome: WebKit Hyphenation

Answer 2

La propiedad de word-break palabras y la separación con guiones son dos cosas completamente diferentes. El primero, originalmente destinado a los idiomas del este de Asia, hace cosas malas a idiomas como el inglés: corta arbitrariamente las palabras en algunos puntos sin indicar que se ha roto una palabra.

Por lo tanto, debe decidir si tiene una expresión en la que un navegador puede insertar un salto de línea en cualquier momento o si desea una separación de palabras.

Para el guión, el código CSS como tal está bien, aunque muchas personas recomendarían colocar los hyphens: auto configuración de propiedades estándar hyphens: auto último hyphens: auto , después de las propiedades prefijadas. Pero requiere que el idioma del texto se declare en el marcado HTML, usando por ejemplo <div lang=en> . Además, el soporte del navegador aún es limitado: IE 9 no admite dicha separación de palabras, y el soporte en IE 10 cubre un conjunto relativamente pequeño de idiomas (incluido el inglés, por supuesto).

Para la separación automática de caracteres en IE 9, necesitaría usar la separación de palabras programada del lado del servidor o, más simple, la separación del lado del cliente con herramientas como Hyphenator.js.

Answer 3

Los guiones se insertan si el navegador admite y el idioma incluye un diccionario de guiones. Pero tu

aaaaaaaaaaaaaaaaaa

no está en un diccionario.

Por lo tanto, debes buscar guiones suaves como en https://jsfiddle.net/LJYj3/5/

Aquí hay más en qué pensar: https://.com/a/856322/1696030