¿Diferencia entre overflow-wrap y word-break?

81

¿Cuál es la diferencia exacta entre overflow-wrap/ word-wrapy word-break? ¿Y alguien puede decirme cuál es mejor para romper enlaces muy largos? La mayoría de la gente dice que debería usar el salto de palabras en combinación con, overflow-wrappero no parece muy lógico. Creo que usarlo overflow-wrapen combinación con word-wrappara una mejor compatibilidad con varios navegadores es el mejor método. ¿Qué piensas?

html css word-wrap word-break Anselmo
fuente
6
A los futuros lectores que puedan estar inicialmente confundidos sobre por qué se cerró esto como una pregunta duplicada. El módulo de texto CSS Nivel 3 establece que overflow-wrapy word-wrapdebe ser 100% idéntico en funcionalidad. Personalmente, tengo la impresión de que word-wrapsolo debería usarse para la compatibilidad con navegadores heredados y que podría estar obsoleto o eliminado en una versión futura de CSS.
Tyler Crompton
22
Para los que votaron para cerrar esto: esto no es un duplicado como se dijo, la pregunta no es la misma. El supuesto duplicado trata sobre dos valores específicos de las dos propiedades y esta pregunta trata sobre las dos propiedades. Realmente no me gusta que algunas personas crean que tienen derecho a prohibir que otras respondan una pregunta. Si no le gusta una pregunta, ¡no la lea!
Hibou57
3
@Tyler Crompton Estás confundiendo word-wrapconword-break
catamphetamina
1
Estoy de acuerdo con Hibou57. Este no es un duplicado. Es lamentable que esté cerrado, ya que es difícil encontrar una respuesta a esta pregunta en línea.
Paul-Hebert
@TylerCrompton Esta pregunta no se trata word-wrap. De esto se trata word-break. Cerrar esto como pregunta duplicada no tiene sentido.
Lone Learner

Respuestas:

64

Citando de la fuente

  • word-wrap: La propiedad de CSS word-wrap se utiliza para especificar si el navegador puede o no dividir 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 cuadro contenedor.

  • overflow-wrap : word-wrapse ha cambiado overflow-wrapel nombre de la propiedad en el borrador actual de la especificación de texto CSS3

  • word-break: la propiedad de CSS word-break se utiliza para especificar cómo (o si) dividir líneas dentro de las palabras

Por lo tanto, necesita un salto de palabras en combinación con un ajuste de palabras, que es la combinación correcta.

karthikr
fuente
Bueno, sí word-wrapes suficiente, pero si el ancho del contenedor es limitado, el diseño podría estropearse.
karthikr
OK veo. Utilizo el ajuste de palabras solo para los enlaces, por lo que el diseño no se rompe.
Anselm
7
Encontré una respuesta: "La especificación W3 que habla de estos parece sugerir que word-break: break-all es para requerir un comportamiento particular con texto CJK, mientras que word-wrap: break-word es el más general, no CJK- consciente, comportamiento ". ( stackoverflow.com/questions/1795109/… ) CJK es un término colectivo para chino, japonés y coreano.
Anselm
Oh. pero pensé que tu pregunta era completamente diferente. De todos modos, me alegro de que hayas encontrado tus respuestas, y confío en haber sido de ayuda un poco
karthikr
4
word-wrap es una extensión obsoleta de Microsoft (incluso si la mayoría de los navegadores la implementó como una propiedad sin prefijo) y ahora ha sido reemplazada por overflow-wrap. MDN fusionó las dos páginas diferentes en una sola: developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
CharlesM
6

Ayuda entender que en este punto, word-break: break-wordes realmente un alias para overflow-wrap: anywhere.

word-break: break-wordestá oficialmente en desuso; consulte el Borrador de trabajo de nivel 3 del módulo de texto CSS :

Para compatibilidad con contenido heredado, la word-breakpropiedad también admite una break-wordpalabra clave obsoleta . Cuando se especifica, tiene el mismo efecto que word-break: normaly overflow-wrap: anywhere, independientemente del valor real de la propiedad overflow-wrap.

Lo que hay que tener en cuenta aquí es que word-break: break-wordes un alias para overflow-wrap: anywhere, NO un alias para overflow-wrap: break-word.

( word-break: normales solo el valor predeterminado para word-break, por lo que puede ignorarlo a menos que esté configurando un valor diferente para word-break).

Cómo hacer overflow-wrap: anywherey overflow-wrap: break-wordser diferente?

La única diferencia en la documentación entre los dos es que overflow-wrap: anywhere"considera las oportunidades de ajuste suave introducidas por el salto de palabras" cuando está "calculando tamaños intrínsecos de contenido mínimo", mientras overflow-wrap: break-wordque NO lo hace.

Supongo que los anchos podrían ser más precisos en algunos casos si los está considerando.

Ben Wheeler
fuente
5

Aquí están las diferencias exactas: (según las pruebas en Chrome v81 y confirmando mis observaciones haciendo referencia a la especificación)

espacio en blanco

normal(predeterminado): colapsa cadenas de espacios en blanco y saltos de línea; agrega saltos de línea donde sea necesario
nowrap: colapsa cadenas de espacios en blanco y saltos de línea; no agrega saltos de línea
pre-line: colapsa cadenas de espacios en blanco; agrega saltos de línea donde sea necesario
pre-wrap: sin colapsar; agrega saltos de línea donde sea necesario
break-spaces: igual que el pre-ajuste, excepto con espacios capaces de activar la adición de saltos de línea
pre: sin colapsar; no agrega saltos de línea

Nota: Si las white-spacelistas de valores seleccionadas "no agregan saltos de línea", el comportamiento de salto de línea de las siguientes propiedades no se puede aplicar (es decir, ignorar).

descanso de palabras

normal(predeterminado): rompe la línea al final de la última palabra que encaja dentro del contenedor [si existe], de lo contrario, la línea se deja sin romper
break-word: rompe la línea al final de la última palabra que encaja dentro del contenedor [si existe], de lo contrario al final del contenedor
break-all: rompe la línea en final del contenedor [puede dividir una palabra, incluso con espacios en blanco cercanos]

overflow-wrap (nombre heredado: word-wrap)

normal(predeterminado): rompe la línea al final de la última palabra que encaja dentro del contenedor [si existe], de lo contrario, la línea se deja sin romper
break-word: rompe la línea al final de la última palabra que encaja dentro del contenedor [si existe], de lo contrario al final del contenedor [si no -flex contenedor], de lo contrario la línea se deja intacta
anywhere: rompe la línea al final de la última palabra que encaja dentro del contenedor [si existe], de lo contrario al final del contenedor [igual que word-break: break-word]

Tenga en cuenta que para overflow-wrap: break-word(como para cualquier combinación que deja líneas demasiado largas para el contenedor), la línea ininterrumpida puede hacer que un contenedor flexible se expanda más allá de la relación flexible especificada (lo que obliga a otros contenedores flexibles a encogerse para tener en cuenta el contenido demasiado largo).

Venryx
fuente
basándome en el hecho de que dijiste "basado en documentos", supongo que este contenido se ha copiado en gran parte de algún lugar. SO normalmente desaprueba el contenido que es solo una copia pura del contenido en otro lugar, pero de cualquier manera debes citar las fuentes al copiar contenido para evitar el plagio. Además, las pruebas en Chrome son poco fiables como fuente de si algo cumple con la forma en que lo dice la especificación.
TylerH
1
@TylerH No es (ni siquiera cerca de) una copia pura del contenido en otros lugares. La mayoría de las descripciones de comportamiento fueron de mis pruebas directas en Chrome, con la referencia a las páginas de documentos solo para confirmar que el comportamiento que observé estaba alineado con la especificación, y para asegurarme de que no me faltaba ningún comportamiento adicional. Muy lejos del plagio. (Actualizaré la nota en la parte superior para aclarar)
Venryx