La propiedad
overflowcontrola lo que sucede con el contenido que es demasiado grande para caber en un área.
La propiedad overflow
La propiedad overflow 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.
La propiedad overflow tiene los siguientes valores:
visible- Por defecto.overflowno se recorta. El contenido se muestra/ abarca 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 ascroll, pero agrega barras de desplazamiento solo cuando es necesario.
Nota: La propiedad
overflowsolo funciona para elementos de nivel bloque con un alto especificado.Nota: En OS X Lion (en Mac), las barras de desplazamiento están ocultas de forma predeterminada y solo se muestran cuando se utilizan (aunque esté configurado
overflow:scroll;).
overflow: visible;
Por defecto, el desbordamiento es visible, lo que significa que no está recortado y se representa fuera del cuadro del elemento:
Ejemplo:
overflow: hidden;
Con el valor hidden, el desbordamiento se recorta y el resto del contenido se oculta:
Ejemplo:
overflow: scroll;
Al configurar el valor scroll, el desbordamiento se recorta y se agrega una barra de desplazamiento dentro del cuadro. Tenga en cuenta que esto agregará una barra de desplazamiento tanto horizontal como vertical (incluso si no la necesita):
Ejemplo:
overflow: auto;
El valor auto es similar scroll, pero agrega barras de desplazamiento solo cuando es necesario:
Ejemplo:
overflow-x & overflow-y
Las propiedades overflow-x y overflow-y especifican si cambiar el desbordamiento de contenido solo horizontal o vertical (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.
Ejemplo:
Todas las propiedades
| Propiedad | Descripción |
overflow | Especifica qué sucede si el contenido sobrepasa el cuadro de un elemento. |
overflow-wrap | Especifica si el navegador puede o no romper líneas con palabras largas, si sobrepasa su contenedor. |
overflow-x | Especifica qué hacer con los bordes izquierdo/derecho del contenido si sobrepasa el área de contenido del elemento. |
overflow-y | Especifica qué hacer con los bordes superior/inferior del contenido si sobrepasa el área de contenido del elemento. |
Resumen
La propiedad CSS overflow controla el contenido que es demasiado grande para caber en un área. Los valores incluyen visible, hidden, scroll y auto. También hay propiedades overflow-x y overflow-y para controlar el desbordamiento horizontal y vertical. La propiedad solo funciona para elementos de nivel bloque con un alto especificado.
Traducido con 💚 desde W3Schools.com