Características overflow-wrap en CSS

Una propiedad overflow-wrap en CSS que especifica si el navegador debe moverse a una nueva línea dentro de las mismas palabras para evitar que el texto vaya más allá de los límites del cuadro de contenido del elemento contenedor.

Funciones overflow-wrap css

Valor inicial	`normal`
Aplicado a	Todos los artículos.
Heredable	Sí
Móvil	No
Valor calculado	Como se especificó.

Por el contrario word-break, la propiedad se moverá overflow-wrapa una nueva línea si el navegador no puede poner la palabra en una línea por sí solo sin ir más allá de los límites del cuadro de contenido.

/* palabras clave */ 
overflow-wrap: normal;
overflow-wrap: break-word;
/* valores globales */ 
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

Esta era una característica no estándar utilizada en IE con el nombre word-wrap, y la mayoría de los navegadores la han agregado con el mismo nombre, pero luego se le cambió el nombre y la overflow-wrap propiedad ahora se word-wrap refiere a ella.

Ejemplos y aplicaciones en código

Un ejemplo del uso de la palabra reservada normal y break-word dos párrafos, uno en Inglés (que tiene una palabra muy larga) y el otro en español:

< P  Class = "normal" > contenido texto </ P > 
< P  Class = "break-word" >  </ P >

< P  Class = "normal" > contenido texto </ P > 
< P  Class = "break-word" >  </ P >

Código CSS:

.normal {
  width: 5em;
  border: 1px solid;
}
.break-word {
  width: 5em;
  border: 1px solid;
  overflow-wrap: break-word;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico (como ajuste de texto)	1.0	3,5	5.5	10,5	1.0
Envoltura de desbordamiento	49	soportado	No soportado	soportado	soportado

Características general

La propiedad acepta overflow-wrap una de las siguientes dos palabras reservadas.

normal

Se moverá a una nueva línea en las posiciones especificadas (por ejemplo, el espacio entre dos palabras).

break-word

Para evitar que el texto salga del cuadro de contenido, se moverá a una nueva línea en palabras que normalmente no se rompen, si no hay otras posiciones de nueva línea aceptables en la misma línea (es decir, la palabra larga está en una línea por sí misma).

Estructura overflow-wrap css

overflow-wrap: normal | break-word;

Consulte también

La página de propiedades line-height que ajusta el espaciado utilizado para las líneas.
La página de propiedades letter-spacing que especifica cuál es el espacio entre caracteres de texto.