Propiedad de desbordamiento CSS | Explicado

Mientras desarrollamos sitios web, a menudo nos encontramos con situaciones en las que el contenido presente en cierto desbordamiento de elementos HTML. Puede elegir qué hacer con el contenido desbordante utilizando la propiedad de desbordamiento CSS. Esta publicación está diseñada para iluminar a sus lectores sobre los detalles de la propiedad de desbordamiento en CSS.

Este tutorial cubre.

1. Propiedad de desbordamiento
2. Valor visible
3. Valor oculto
4. Valor automático
5. Overflow-x y desbordamiento

Vamos a empezar.

Propiedad de desbordamiento

La propiedad de desbordamiento controla el comportamiento del contenido que desborda el área especificada de un elemento, además, la propiedad de desbordamiento está diseñada solo para elementos de nivel de bloque.

Al igual que otras propiedades de CSS, la propiedad de desbordamiento también exhibe ciertos valores que se explican en profundidad a continuación.

Valor visible

Este es un valor predeterminado de la propiedad de desbordamiento. Supongamos que si su contenido se coloca dentro de una caja y se desborda, este valor mostrará el contenido que excede el área de la caja. Además, el contenido que se muestra fuera del límite de la caja no perturbará la alineación de otros elementos circundantes.

Aquí hay un ejemplo de este valor.

Html

Mientras desarrollamos sitios web, a menudo nos encontramos con situaciones en las que el contenido presente en cierto desbordamiento de elementos HTML. Puede elegir qué hacer con el contenido desbordante utilizando la propiedad de desbordamiento CSS.

CSS

Producción

Pasando al siguiente valor.

Valor oculto

El valor oculto de la propiedad de desbordamiento oculta todo el contenido que excede el área de la caja. Esta propiedad debe manejarse con cuidado porque el contenido de que esta propiedad se esconde es completamente invisible para el usuario, sin embargo, es el más adecuado para mostrar contenido que es de naturaleza dinámica. A continuación se muestra un ejemplo del valor oculto.

Producción

El contenido que excede el área de la caja ha sido oculta.

Valor de desplazamiento

Este valor oculta el contenido que excede el área de la caja dentro de la caja y proporciona barras de desplazamiento vertical y horizontal para ver el contenido. Aquí hay un ejemplo.

Producción

Se han agregado las barras de desplazamiento.

Valor automático

Sin embargo, este valor tiene una función similar al valor de desplazamiento, lo que lo hace diferente del valor de desplazamiento es que agrega barras de desplazamiento al cuadro solo cuando el contenido excede el área de la caja. Además, agregará solo el tipo de barra de desplazamiento que se requiere. Aquí hay un ejemplo.

Producción

El valor automático de la propiedad de desbordamiento se aplica correctamente.

Overflow-x y desbordamiento

Estas son más dos propiedades que controlan lo que sucede con el contenido desbordante, ya sea horizontal o verticalmente,. La propiedad Overflow-X controla el comportamiento horizontal del contenido, mientras que la propiedad de desbordamiento determina el comportamiento vertical del contenido. Aquí hay un ejemplo.

En el ejemplo anterior, a la propiedad Overflow-X se le ha asignado el valor de desplazamiento y el valor de desbordamiento se ha asignado el valor oculto como resultado, el contenido que excede el área de la caja se ocultará y el cuadro tendrá una barra de desplazamiento vertical.

Producción

Conclusión

La propiedad de desbordamiento se utiliza para controlar el comportamiento del contenido que desborda el área especificada de un elemento, además, la propiedad de desbordamiento está diseñada solo para elementos de nivel de bloque. La propiedad de desbordamiento representa cuatro valores que son; visible, desplazado, oculto y auto. Hay más dos propiedades que controlan lo que sucede con el contenido desbordante, ya sea horizontal o verticalmente, que son; desbordamiento y desbordamiento. Esta publicación analiza la propiedad de desbordamiento en profundidad con la ayuda de ejemplos adecuados.