La propiedad overflow controla lo que sucede con el contenido que es demasiado grande para caber en un área. Dicha propiedad especifica si recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en el área especificada.
Los valores que puede tener son los siguientes:
- visible: por defecto. El desbordamiento no se recorta. El contenido se muestra fuera de la caja del elemento.
- hidden: El desbordamiento se recorta y el resto del contenido será invisible
- scroll: El desbordamiento se recorta y se agrega una barra de desplazamiento para ver el resto del contenido
- auto: Similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario
Nota: la propiedad overflow solo funciona para elementos de bloque con una altura específica.
Ejm
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}El resultado sería el siguiente:
overflow-x y overflow-y
Las propiedades overflow-x y overflow-y especifican si cambiar el desbordamiento de contenido solo horizontal o verticalmente (o ambos):
- overflow-x especifica qué hacer con los bordes izquierdo/derecho del contenido.
- overflow-y especifica qué hacer con los bordes superior/inferior del contenido.
Ejm
div {
overflow-x: hidden; /* Oculta el scroll horizontal */
overflow-y: scroll; /* Añade scroll verticlaAdd vertical scrollbar */
}Resumen
| Propiedad | Descripción |
|---|---|
| overflow | Especifica qué sucede si el contenido desborda el cuadro de un elemento. |
| overflow-wrap | Especifica si el navegador puede o no romper líneas con palabras largas, si desbordan su contenedor |
| overflow-x | Especifica qué hacer con los bordes izquierdo/derecho del contenido si se desborda el área de contenido del elemento. |
| overflow-y | Especifica qué hacer con los bordes superior/inferior del contenido si se desborda el área de contenido del elemento. |