Características overflow-wrap en CSS

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 inicialnormal
Aplicado aTodos los artículos.
Heredable
MóvilNo
Valor calculadoComo 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 normalbreak-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ísticaChromeFirefoxIEÓperaSafari
Soporte básico (como ajuste de texto)1.03,55.510,51.0
Envoltura de desbordamiento49soportadoNo soportadosoportadosoportado

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.