¿Qué es el desbordamiento en CSS?

Propiedad de desbordamiento en CSS

Cada elemento en una página es un cuadro rectangular. El tamaño, el posicionamiento y el comportamiento de estos cuadros se pueden controlar a través de CSS. Por comportamiento, quiero decir cómo lo maneja el cuadro cuando cambia el contenido dentro y alrededor de él. Por ejemplo, si no establece la altura de un cuadro, la altura de ese cuadro crecerá tanto como sea necesario para acomodar el contenido. Pero, ¿qué sucede cuando establece un alto o ancho específico en una caja, y el contenido dentro no puede caber? Ahí es donde entra en juego la propiedad de desbordamiento de CSS, lo que le permite especificar cómo desea que se maneje eso.

Hay cuatro valores para la propiedad de desbordamiento: visible (predeterminado), oculto, desplazamiento y automático. También hay propiedades hermanas overflow-y y overflow-x, que disfrutan de una adopción menos generalizada.

La propiedad de desbordamiento en css se usa en caso de que el contenido dentro de un elemento no se ajuste al área que le ha dado a ese elemento.

La propiedad de desbordamiento tiene valores

  1. Visible: el contenido se desborda y aparece fuera del elemento (valor predeterminado).
  2. Oculto: la parte desbordante del contenido será invisible.
  3. Desplazarse: agrega una barra de desplazamiento al elemento para leer el contenido desbordado.
  4. Automático: agrega una barra de desplazamiento si es necesario.

Cuando el contenido de un elemento no puede ajustarse dentro de ese elemento, se denomina desbordamiento en CSS. Puede controlar el comportamiento de desbordamiento de los elementos de su página web o sitio web utilizando la propiedad de desbordamiento de CSS. Esta propiedad puede tomar los siguientes cuatro valores.

visible: valor predeterminado

oculto

voluta

auto

Además, puede controlar el comportamiento de desbordamiento en la dirección horizontal y vertical por separado utilizando las propiedades overflow-x y overflow-y respectivamente.

Puede leer sobre la propiedad de desbordamiento en detalle de la propiedad de desbordamiento CSS

La propiedad de desbordamiento especifica qué sucede si el contenido desborda el cuadro de un elemento.

Por ejemplo, si ha creado un cuadro

de 100 px de alto y 100 px de ancho, y agrega un texto largo (más de 120–150), el texto bajará y esto será algo notable cuando haga un un elemento más con texto debajo que

.Debido a que ambos textos se superpondrán entre sí.

Entonces, si usa la propiedad de desbordamiento para desplazarse, el texto no saldrá del cuadro de 100 × 100 y, de ser así, aparecerá la barra de desplazamiento. Para que el usuario pueda desplazarse y leer el texto completo.

Puede probar el ejemplo anterior en tryiteditor cambiando sus valores.

Los valores admitidos para el desbordamiento son visibles | oculto | desplazamiento | auto | inicial | heredar

artículo principal en w3schools. Para obtener más información sobre css -css-magzine.

cuando el tamaño de un contenido dentro de un div es mayor que el tamaño del div