¿Diferencia entre overflow-wrap y word-break?

Ya no busques más por todo internet ya que estás al sitio necesario, tenemos la solución que quieres pero sin complicaciones.

Citando de la fuente

• word-wrap: La propiedad CSS word-wrap se usa para especificar si el navegador puede o no dividir líneas dentro de las palabras para evitar el desbordamiento cuando una string es demasiado largo para caber en su caja contenedora.

• envoltura de desbordamiento: word-wrap la propiedad ha sido renombrada overflow-wrap en el borrador actual de la especificación de texto CSS3

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

Por lo tanto, necesita word-break en combinación con word-wrap, que es la combinación correcta.

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

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

Para la compatibilidad con el contenido heredado, el word-break La propiedad también admite un obsoleto break-word palabra clave. Cuando se especifica, tiene el mismo efecto que word-break: normal y overflow-wrap: anywhere, independientemente del valor real de la propiedad overflow-wrap.

Lo que hay que señalar aquí es que word-break: break-word es un alias para overflow-wrap: anywhere, NO un alias para overflow-wrap: break-word.

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

Como hacer overflow-wrap: anywhere y overflow-wrap: break-word ¿diferir de?

La única diferencia en la documentación entre los dos es que overflow-wrap: anywhere SÍ “considera las oportunidades de envoltura suave introducidas por la palabra ruptura” cuando está “calculando tamaños intrínsecos de contenido mínimo”, mientras que overflow-wrap: break-word no.

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

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

espacios en blanco

normal (predeterminado): colapsa las cadenas de espacios en blanco y los saltos de línea; agrega saltos de línea donde sea necesario
nowrap: colapsa las cadenas de espacios en blanco y los saltos de línea; no agrega saltos de línea
pre-line: colapsa las 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 pre-wrap, 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 el seleccionado white-space value enumera “no agrega saltos de línea”, el comportamiento de salto de línea de las siguientes propiedades no se puede aplicar (es decir, se ignora).

salto de palabra

normal (predeterminado): rompe la línea al final de la última palabra que se ajusta al contenedor [if one exists], de lo contrario, la línea queda intacta
break-word: rompe la línea al final de la última palabra que se ajusta al contenedor [if one exists], de lo contrario al final del contenedor
break-all: rompe la línea al final del contenedor [can split a word, even with nearby whitespace]

envoltura de desbordamiento (nombre heredado: ajuste de palabra)

normal (predeterminado): rompe la línea al final de la última palabra que se ajusta al contenedor [if one exists], de lo contrario, la línea queda intacta
break-word: rompe la línea al final de la última palabra que se ajusta al contenedor [if one exists], de lo contrario al final del contenedor [if in non-flex container], de lo contrario, la línea queda intacta
anywhere: rompe la línea al final de la última palabra que se ajusta al contenedor [if one exists], de lo contrario al final del contenedor [so same as word-break: break-word]

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

Te mostramos reseñas y calificaciones

No se te olvide dar difusión a este post si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador