¿Cuál es la diferencia entre “word-break: break-all” versus “word-wrap: break-word” en CSS

Actualmente me pregunto cuál es la diferencia entre los dos. Cuando uso ambos parecen romper la palabra si no se ajusta al 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-all es para requerir un comportamiento particular con texto CJK (chino, japonés y coreano), mientras word-wrap: break-word ajuste de word-wrap: break-word es el más general, no -CJK-aware, comportamiento.

word-wrap: break-word recientemente cambiada 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)

Por lo tanto, si tiene muchos tramos de tamaño fijo que obtienen contenido de forma dinámica, puede que prefiera usar el ajuste de word-wrap: break-word , ya que de esa manera solo se interrumpen las palabras continuas, y en caso de que sea una oración que contenga muchas palabras, los espacios se ajustan para obtener palabras intactas (sin interrupción dentro de una palabra).

Y si no importa, ve por cualquiera de los dos.

Con word-break , una palabra muy larga comienza en el punto en que debería comenzar y se está rompiendo todo 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 el word-wrap , una 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. 

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

word-wrap:break-word

en realidad no hará que las palabras largas se envuelvan, lo que puede provocar 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.

enter image description here

jsfiddle demo .

Esto es todo lo que puedo averiguar. No estoy seguro de si ayuda, pero pensé que lo agregaría a la mezcla.

AJUSTE DE LÍNEA

Esta propiedad especifica si la línea renderizada actual se debe romper si el contenido excede el límite del cuadro de representación especificado para un elemento (esto es similar en cierto modo a las propiedades ‘clip’ y ‘overflow’ en el bash). Esta propiedad solo debe aplicarse si el elemento tiene una representación visual, es un elemento en línea con alto / ancho explícito, está absolutamente posicionado y / o es un elemento de bloque.

WORD-BREAK

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

word-wrap ha cambiado el nombre de la word-wrap overflow-wrap probablemente para evitar esta confusión.

Ahora esto es lo que tenemos:

envoltura de desbordamiento

La propiedad de desbordamiento se utiliza para especificar si el navegador puede romper o no las líneas dentro de las palabras para evitar el desbordamiento cuando una cadena irrompible es demasiado larga para caber en su cuadro contenedor.

Valores posibles:

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

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

fuente .

palabra-romper

La propiedad CSS de salto de palabra se usa para especificar si se deben dividir 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 principal diferencia entre overflow-wrap y word-break es que la primera determina el comportamiento en una situación de desbordamiento , mientras que la última determina el comportamiento en una situación normal (sin desbordamiento). Una situación de desbordamiento ocurre cuando el contenedor no tiene espacio suficiente para contener el texto. Romper líneas en esta situación no ayuda porque no hay espacio (imagina una caja con ancho y altura de fijación).

Asi que:

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

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

  • word-break: break-all es para separar palabras extranjeras, no CJK (por ejemplo, occidentales) en escritos de caracteres CJK (chino, japonés o coreano).
  • word-wrap: break-word es para romper palabras en un lenguaje no mixto (digamos solo occidental).

Al menos, estas fueron las intenciones de W3. Lo que en realidad sucedió fue un gran revoltijo con incompatibilidades de navegador como resultado. Aquí hay una excelente descripción de los diversos problemas involucrados .

El siguiente fragmento de código puede servir como resumen de cómo lograr el ajuste de palabras mediante 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; 

word-break:break-all :

palabra para continuar al borde y luego entrar en nueva línea.

word-wrap:break-word :

Al principio, ajuste la palabra 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; } 
 word-break:break-all 
This text is styled with soooooooooooooooooooooooooome of the text formatting properties.
word-wrap:break-word
This text is styled with soooooooooooooooooooooooooome of the text formatting properties.

Además de los comentarios anteriores, el soporte de navegador para el word-wrap de word-wrap parece ser un poco mejor que para word-break .