Desbordamiento de CSS explicado con ejemplos

La overflowpropiedad controla lo que sucede si el contenido de un elemento se desborda de su ancho y alto establecidos. Es una abreviatura de las propiedades overflow-xy overflow-y. Tenga en cuenta que esta propiedad solo funciona para elementos de bloque con una altura especificada.

Con overflow, puede controlar si recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área específica.

Valores

  • visible: Este es el valor predeterminado de la propiedad. Ningún contenido se recorta cuando es más grande que las dimensiones establecidas.
  • hidden: El contenido que se desborda está oculto.
  • scroll: El contenido está oculto, pero los usuarios aún pueden desplazarse y ver el contenido oculto.
  • auto: Si el contenido es más grande que las dimensiones establecidas, el contenido se ocultará automáticamente y aparecerá una barra de desplazamiento.
  • initial: Utiliza el valor predeterminado para esta propiedad visible,.
  • inherit: Utiliza el valor de desbordamiento del elemento principal.

Ejemplos

Aquí está el HTML y CSS que usaremos para todos los siguientes ejemplos:

Who's the baby cats are fats i like to pets them they like to meow back. Attack the dog then pretend like nothing happened kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff, see owner, run in terror. Rub face on everything cats are the world. Meow meow, i tell my human i rule on my back you rub my tummy i bite you hard the best thing in the universe is a cardboard box if it smells like fish eat as much as you wish and carefully drink from water glass and then spill it everywhere and proceed to lick the puddle. Paw at beetle and eat it before it gets away rub butt on table for chew foot, or love you, then bite you and pounce on unsuspecting person. What a cat-ass-trophy! cat slap dog in face let me in let me out let me in let me out let me in let me out who broke this door anyway for prance along on top of the garden fence, annoy the neighbor's dog and make it bark and chew iPad power cord purr.

.box-element { width: 400px; height: 200px; border: dashed; } .box-element { /* overflow will be set here */ }

Visible:

.box-element { overflow: visible; }

Oculto:

.box-element { overflow: hidden; }

Desplazarse:

.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 .box-elementse verá así:

Si el contenido desborda el eje Y, ese contenido se ocultará, mientras que una barra de desplazamiento debería estar visible para que los usuarios lean el resto del contenido.