Actualmente me pregunto cuál es la diferencia entre los dos. Cuando usé ambos, parecen romper la palabra si no encaja en el contenedor. Pero, ¿por qué el W3C hizo dos formas de hacerlo?

La especificación W3 que habla de estos parece sugerir que word-break: break-alles para requerir un comportamiento particular con texto CJK (chino, japonés y coreano), mientras que word-wrap: break-wordes el comportamiento más general, no consciente de CJK.

word-wrap: break-word cambiado recientemente a overflow-wrap: break-word

• envolverá palabras largas en la siguiente línea.
• ajusta diferentes palabras para que no se rompan en el medio.

word-break: break-all

• independientemente de si es una palabra continua o muchas palabras, las divide en el borde del límite de ancho. (es decir, incluso dentro de los caracteres de la misma palabra)

Entonces, si tiene muchos tramos de tamaño fijo que obtienen contenido dinámicamente, es posible que prefiera usar word-wrap: break-word, de esa manera solo las palabras continuas se dividen en el medio, y en caso de que sea una oración que comprenda muchas palabras, los espacios se ajustan para obtener palabras intactas (sin interrupción en una palabra).

Y si no importa, ve por cualquiera.

Con word-break, una palabra muy larga comienza en el punto en que debería comenzar y se rompe el tiempo que sea necesario

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

Sin embargo, con word-wrapuna palabra muy larga NO COMENZARÁ en el punto en que debería comenzar. se ajusta a la siguiente línea y luego se rompe el tiempo que sea necesario

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrapha sido renombrado overflow-wrapprobablemente para evitar esta confusión.

Ahora esto es lo que tenemos:

envoltura de desbordamiento

La propiedad de ajuste de desbordamiento se utiliza para especificar si el navegador puede dividir o no las líneas dentro de las palabras para evitar el desbordamiento cuando una cadena que de otro modo sería irrompible es demasiado larga para caber en su caja de contención.

Valores posibles:

• normal : indica que las líneas solo pueden romperse en los puntos de salto de palabras normales.

• palabra de interrupción : indica que las palabras normalmente irrompibles pueden dividirse en puntos arbitrarios si no hay puntos de interrupción aceptables en la línea.

fuente .

salto de palabra

La propiedad CSS de salto de palabras se utiliza para especificar si se deben romper las líneas dentro de las palabras.

• normal : use la regla de salto de línea predeterminada.
• break-all : se pueden insertar saltos de palabra entre cualquier carácter para texto que no sea CJK (chino / japonés / coreano).
• keep-all : no permita saltos de palabra para el texto CJK. El comportamiento del texto que no es CJK es el mismo que para el normal.

fuente .

Ahora volviendo a su pregunta, la diferencia principal entre overflow-wrap y word-break es que la primera determina el comportamiento en una situación de overflow , mientras que la segunda determina el comportamiento en una situación normal (sin overflow). Una situación de desbordamiento ocurre cuando el contenedor no tiene suficiente espacio para contener el texto. Romper líneas en esta situación no ayuda porque no hay espacio (imagine una caja con ancho y altura fijos).

Entonces:

• overflow-wrap: break-word: En una situación de desbordamiento, rompa las palabras.
• word-break: break-all: En una situación normal, simplemente rompa las palabras al final de la línea. Un desbordamiento no es necesario.

Al menos en Firefox (a partir de v24) y Chrome (a partir de v30), cuando se aplica al contenido de un tableelemento:

word-wrap:break-word

en realidad no hará que las palabras largas se ajusten, lo que puede hacer que la tabla exceda los límites de su contenedor;

word-break:break-all

dará como resultado el ajuste de las palabras y el ajuste de la tabla dentro de su contenedor.

jsfiddle demo .

Esto es todo lo que puedo descubrir. No estoy seguro de si ayuda, pero pensé en agregarlo a la mezcla.

AJUSTE DE LÍNEA

Esta propiedad especifica si la línea renderizada actual debe romperse si el contenido excede el límite del cuadro de representación especificado para un elemento (esto es similar en algunos aspectos a las propiedades 'clip' y 'overflow' en la intención). Esta propiedad solo debería aplicarse si el elemento tiene una representación visual, es un elemento en línea con alto / ancho explícito, está en una posición absoluta y / o es un elemento de bloque.

ROMPER LA PALABRA

Esta propiedad controla el comportamiento de salto de línea dentro de las palabras. Es especialmente útil en los casos en que se usan múltiples idiomas dentro de un elemento.

Hay una gran diferencia break-alles básicamente inutilizable para representar texto legible.

Digamos que tienes la cadena This is a text from an old magazineen un contenedor que solo cabe 6 caracteres por fila.

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

Como puede ver, el resultado es horrible. break-allintentará acomodar tantos caracteres en cada fila como sea posible, ¡incluso dividirá una palabra de 2 letras como "es" en 2 filas! Es ridículo. Es por eso break-allque rara vez se usa.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordsolo separará palabras que son demasiado largas para caber en el contenedor (como "revista", que tiene 8 caracteres, y el contenedor solo tiene 6 caracteres). Nunca romperá palabras que puedan caber en el contenedor en su totalidad, en cambio las empujará a una nueva línea.

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

palabra para continuar bordeando y luego romper en nueva línea.

word-wrap:break-word :

Al principio, ajuste de línea en nueva línea y luego continúe hasta el borde.

Ejemplo:

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

A partir de las especificaciones W3 respectivas, que resultan poco claras debido a la falta de contexto, se puede deducir lo siguiente:

• word-break: break-all es para dividir palabras extranjeras que no son CJK (digamos occidentales) en escritos de caracteres CJK (chinos, japoneses o coreanos).
• word-wrap: break-word es para romper palabras en un idioma no mixto (digamos únicamente el occidental).

Al menos, estas fueron las intenciones de W3. Lo que realmente sucedió fue un gran problema con las incompatibilidades del navegador como resultado. Aquí hay una excelente reseña de los diversos problemas involucrados .

El siguiente fragmento de código puede servir como un resumen de cómo lograr el ajuste de palabras usando CSS en un entorno de navegador cruzado:

-ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

Además de los comentarios anteriores, la compatibilidad del navegador para word-wrapparece ser un poco mejor que para word-break.