traduccion - ¿Cuál es la diferencia entre "word-break: break-all" frente a "word-wrap: break-word" en CSS
word-break vs word-wrap (9)
Actualmente me pregunto cuál es la diferencia entre los dos. Cuando utilicé ambos, parece que rompen la palabra si no se ajusta al contenedor. Pero ¿por qué W3C hizo dos maneras de hacerlo?
A partir de las respectivas especificaciones de W3, que resultan poco claras debido a la falta de contexto, se puede deducir lo siguiente:
-
word-break: break-alles para dividir palabras extranjeras, no-CJK (digamos occidentales) en escritos de caracteres CJK (chino, japonés o coreano). -
word-wrap: break-wordes para romper palabras en un lenguaje no mixto (digamos únicamente occidental).
Al menos, estas eran las intenciones de W3. Lo que realmente sucedió fue una gran polla con 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;
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
no hará que las palabras largas se ajusten, lo que puede hacer que la tabla supere los límites de su contenedor;
word-break:break-all
resultará en el ajuste de las palabras, y la tabla encaja dentro de su contenedor.
Con word-break , una palabra muy larga comienza en el punto en que debe comenzar y se está rompiendo el tiempo 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.
Esto es todo lo que puedo averiguar. No estoy seguro de si ayuda, pero pensé que lo añadiría a la mezcla.
AJUSTE DE LÍNEA
Esta propiedad especifica si la línea representada actual debería interrumpirse 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 de "clip" y "desbordamiento" en la intención). Esta propiedad solo debe aplicarse si el elemento tiene una representación visual, es un elemento en línea con altura / anchura explícitas, está posicionado absolutamente y / o es un elemento de bloque.
Romper las palabras
Esta propiedad controla el comportamiento de corte de línea dentro de las palabras. Es especialmente útil en los casos en que se utilizan varios idiomas dentro de un elemento.
La especificación W3 que habla de esto parece sugerir que word-break: break-all es para requerir un comportamiento particular con el texto CJK (chino, japonés y coreano), mientras que word-wrap: break-word es el más general, no -CJK-consciente, comportamiento.
word-break:break-all :
Palabra para continuar bordeando y luego romper en nueva línea.
word-wrap:break-word :
Al principio, ajuste la palabra en nueva línea y luego continúe bordeando.
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>
word-wrap: break-word recientemente cambiado a overflow-wrap: break-word
- envolverá las 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 al borde del límite de ancho. (es decir, incluso dentro de los caracteres de la misma palabra)
Entonces, si tiene muchos intervalos de tamaño fijo que obtienen contenido de forma dinámica, es posible que prefiera usar word-wrap: break-word , ya que de esa manera solo se dividen las palabras continuas en medio, 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 eso no importa, ve por cualquiera.
word-wrap ha sido renombrado a overflow-wrap probablemente para evitar esta confusión.
Ahora esto es lo que tenemos:
envoltura de desbordamiento
La propiedad overflow-wrap se usa para especificar si el navegador puede o no romper líneas dentro de las palabras para evitar el desbordamiento cuando una cadena por lo demás irrompible es demasiado larga para caber en su caja contenedora.
Valores posibles:
normal : indica que las líneas solo pueden romperse en los puntos normales de separación de palabras.
palabra de interrupción : indica que las palabras normalmente irrompibles se pueden dividir en puntos arbitrarios si no hay puntos de ruptura aceptables en la línea.
descanso de palabra
La propiedad de CSS word-break se usa para especificar si se deben dividir las líneas dentro de las palabras.
- normal : use la regla predeterminada de salto de línea.
- 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 palabras para el texto CJK. El comportamiento de texto no CJK es el mismo que para normal.
Ahora volviendo a su pregunta, la principal diferencia entre el ajuste de desbordamiento y el salto de palabra es que el primero determina el comportamiento en una situación de desbordamiento , mientras que el último 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 (imagine un cuadro con ancho y altura fijos).
Asi que:
-
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. No es necesario un desbordamiento.