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?
397
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 que word-wrap: break-word
es el comportamiento más general, no consciente de CJK.
word-break
especifica 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 usarloword-break
junto 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 unpre
elemento o una celda de tabla donde laword-wrap
propiedad puede no funcionar como se esperaba .word-wrap: break-word
cambiado recientemente aoverflow-wrap: break-word
word-break: break-all
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.
fuente
Con
word-break
, una palabra muy larga comienza en el punto en que debería comenzar y se rompe el tiempo que sea necesarioSin embargo, con
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 necesariofuente
break-word
? Me molestó encontrar queword-break
rompe las URL pero noword-wrap
. Ambos usando lobreak-word
obtuvieron de css-tricks.com/snippets/css/…word-wrap
ha sido renombradooverflow-wrap
probablemente para evitar esta confusión.Ahora esto es lo que tenemos:
envoltura de desbordamiento
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
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.fuente
overflow-wrap
/word-wrap
No 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-break
por otro lado lo arregló.table-layout: fixed;
(posiblemente junto conwidth
/max-width
) puede hacer que funcioneoverflow-wrap/word-wrap
pero depende del caso de uso específico; talword-break
vez no sea lo que quieres.Al menos en Firefox (a partir de v24) y Chrome (a partir de v30), cuando se aplica al contenido de un
table
elemento: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 .
fuente
table-layout:fixed
para hacer que la tabla no se expanda cuando se usaword-wrap:break-work
table-layout:fixed
word-wrap
junto conpre
etiquetas en Firefox a menos que tengan un ancho fijo definido. El usoword-break
produce el resultado deseado. Me vinculé a esta respuesta en un comentario publicado anteriormente porque demuestra un caso de uso común.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.
fuente
word-wrap
yword-break
que ambos pueden tener el valorbreak-word
Hay una gran diferencia
break-all
es básicamente inutilizable para representar texto legible.Digamos que tienes la cadena
This is a text from an old magazine
en un contenedor que solo cabe 6 caracteres por fila.word-break: break-all
Como puede ver, el resultado es horrible.
break-all
intentará 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 esobreak-all
que rara vez se usa.word-wrap: break-word
break-word
solo 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.fuente
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:
fuente
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:
fuente
Además de los comentarios anteriores, la compatibilidad del navegador para
word-wrap
parece ser un poco mejor que paraword-break
.fuente