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

397

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?

Siesta
fuente

Respuestas:

215

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.

AakashM
fuente
28
También tenga en cuenta que word-wrap es un nombre heredado para la nueva propiedad "overflow-wrap" en la especificación. w3.org/TR/css3-text/#overflow-wrap
Squareman
12
En pocas palabras: " word-breakespecifica oportunidades de ajuste suave entre letras ..." La especificación W3C utiliza texto CLK como ejemplo , pero ese no es su único uso previsto. Es común usarlo word-breakjunto con cadenas largas (como URL o líneas de código) cuando desea que se rompan en el ancho del contenedor, especialmente si el contenedor es un preelemento o una celda de tabla donde la word-wrappropiedad puede no funcionar como se esperaba .
gfullam
1
Debido a que la especificación solo usa los idiomas asiáticos como ejemplo, no como el único propósito de la propiedad (como también lo describe gfullam), que parece ser la principal conclusión de esta respuesta.
Shikkediel
3
word-wrap: break-word -> wont break table ---- word-break: break-all -> rompe tablas
Fernando Silva
1
Tenga en cuenta que el enlace del W3C que mencionó @squareman
Charles Wood
409

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.

Bhumi Singhal
fuente
28
¿Por qué no se acepta esto? Esta respuesta es más útil para la mayoría de los usuarios. El comportamiento de CJK solo se aplica a sitios web muy internacionales.
MarioDS
3
Respuesta corta pero dulce! ¿Aunque es posible que desee cambiar el ajuste de texto al ajuste de desbordamiento?
Gaurav Agarwal
55
@MarioDS se aplica a "sitios web muy internacionales" o, como el 20% del mundo los llama, "sitios web"
fregante
1
@GauravAgarwal: debe tenerse en cuenta que IE (incluso en la última versión) todavía se basa en el nombre heredado. Ver caniuse.com/#search=overflow-wrap
Felix Wienberg
2
El símbolo de "respuesta aceptada" está relacionado únicamente con el autor de la pregunta, relevante para la exactitud de la respuesta cuando era relevante para él / ella en ese momento, eso es todo. No se espera que los usuarios vuelvan a sus preguntas después de un par de años y revisen nuevas respuestas. Los votos cuentan con respuesta muestran a la comunidad "respuesta aceptada".
elpddev
98

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.
shuky
fuente
2
¿Sigue siendo así si lo usas break-word? Me molestó encontrar que word-breakrompe las URL pero no word-wrap. Ambos usando lo break-wordobtuvieron de css-tricks.com/snippets/css/…
Karthik T
44

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.
André Pena
fuente
44
Excelente explicación Un ejemplo que acabo de encontrar ahora: palabras largas en una celda de la tabla. overflow-wrap/ word-wrapNo hacen los envuelven. Presumiblemente porque las celdas de la tabla sin un ancho fijo se expanden en lugar de desbordarse. En cambio, la mesa se ensanchó y chocó con otros elementos. word-breakpor otro lado lo arregló.
Henrik N
@HenrikN table-layout: fixed;(posiblemente junto con width/ max-width) puede hacer que funcione overflow-wrap/word-wrappero depende del caso de uso específico; tal word-breakvez no sea lo que quieres.
phk
42

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.

ingrese la descripción de la imagen aquí

jsfiddle demo .

Jon Schneider
fuente
55
Puede usar table-layout:fixedpara hacer que la tabla no se expanda cuando se usaword-wrap:break-work
veksen
@vesken No pude hacer que eso funcionara (en Firefox 26). ¿Podría proporcionar una versión actualizada de mi jsfiddle vinculado anteriormente para demostrar lo que quiere decir?
Jon Schneider
3
Lo hice funcionar agregando un ancho en la mesa, ya sea 100%, o moviendo el ancho de 80 px del contenedor a la mesa. jsfiddle.net/SDGAX/37 Sin embargo, el comportamiento de la tabla no es el mismo usandotable-layout:fixed
veksen
2
Este comportamiento también ocurre cuando se usa word-wrapjunto con preetiquetas en Firefox a menos que tengan un ancho fijo definido. El uso word-breakproduce el resultado deseado. Me vinculé a esta respuesta en un comentario publicado anteriormente porque demuestra un caso de uso común.
gfullam
Además, los elementos en línea de visualización sin ancho no se ven afectados por el "ajuste de palabra", pero el "salto de palabra" aún funciona.
tfE
22

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.

Jonny Haynes
fuente
Gracias por esto, ya que estaba buscando la diferencia entre word-wrapy word-breakque ambos pueden tener el valorbreak-word
Chad
10

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

Drkawashima
fuente
Muy bien explicado. El ejemplo muestra la diferencia muy clara. ¡Esta debería ser la respuesta aceptada!
naitsirch
9

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>

Ehsan
fuente
8

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;
Serge Stroobandt
fuente
2

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

usuario2619604
fuente