
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-wrap
a 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.
- Propiedades float en CSS
- Propiedad clear en CSS
- Introducción al Lenguaje de Programación CSS
- Diferencias entre SASS y SCSS
- Características z-index en CSS
- Características width en CSS
- Características visibility en CSS
- Características top en CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características right en CSS
- Características position en CSS
- Características padding-top en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características padding en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow-wrap en CSS
- Características overflow en CSS
- Características order en CSS
- Características min-width en CSS
- Características min-height en CSS
- Características max-width en CSS
- Características max-height en CSS
- Características margin-top en CSS
- Características margin-right en CSS
- Características margin-left en CSS
- Características margin-bottom en CSS
- Características line-height en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características left en CSS
- Características justify-content en CSS
- Características height en CSS
- Características font-weight en CSS