2.6 KiB
| title | localeTitle |
|---|---|
| Overflow | Rebosar |
Rebosar
La propiedad de overflow especifica qué sucede si el contenido desborda la caja de un elemento (esta propiedad solo funciona para elementos de bloque con una altura específica).
Esta propiedad especifica si se debe recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para ajustarse a un área específica.
Por ejemplo, un elemento de nivel de bloque determinado ( <div> ) establecido en 300px de ancho, que contiene una imagen de 400px de ancho. La imagen saldrá del div y será visible por defecto. Sin embargo, si el valor de desbordamiento se establece en oculto, la imagen se cortará a 300 px.
Valores
visible: este es el valor predeterminado de la propiedad. El contenido no se recorta cuando es más grande que el cuadro.hidden: se ocultará el contenido desbordado.scroll: similar a oculto, pero los usuarios podrán desplazarse por el contenido oculto.auto: si el contenido sale de su caja, ese contenido se ocultará, mientras que una barra de desplazamiento debe ser visible para que los usuarios lean el resto del contenido.initial: utiliza el valor predeterminado que es visible.inherit: establece el desbordamiento en el valor de su elemento principal.
Ejemplos
Visible:
.box-element { overflow: visible; }
Oculto:
.box-element { overflow: hidden; }
Voluta:
.box-element { overflow: scroll; }
Auto:
.box-element { overflow: auto; }
overflow-x y overflow-y
overflow-x: permite al usuario desplazarse por el contenido que se extiende más allá de la altura del elemento de cuadro.overflow-y: permite al usuario desplazarse por el contenido que se extiende más allá del ancho del cuadro.
.box-element {
overflow-x: scroll;
overflow-y: auto;
}
Y el .box-element se verá así: 
Si el contenido desborda el eje Y, entonces ese contenido se ocultará, mientras que una barra de desplazamiento debe ser visible para que los usuarios lean el resto del contenido.
Más información:
Trucos CSS: desbordamiento