Según el concepto del modelo de cuadro CSS, cada elemento de la página es un cuadro rectangular. El tamaño, la posición y el comportamiento de estos cuadros se pueden controlar mediante CSS. Por comportamiento, me refiero a cómo se maneja cuando cambia el contenido dentro y fuera de la caja. Por ejemplo, si no establece la altura de un cuadro, la altura del cuadro crecerá según sea necesario para acomodar su contenido. Pero, ¿qué sucede cuando especifica una altura o un ancho para un cuadro y el contenido del interior lo excede? Este es el momento de agregar la propiedad de desbordamiento de CSS, que le permite especificar cómo manejar esta situación.
La propiedad de desbordamiento tiene cuatro valores: visible (predeterminado), oculto, desplazamiento y automático . También hay dos propiedades hermanas de desbordamiento, overflow-y y overflow-x, que rara vez se utilizan.
Analicemos cada uno de estos valores y analicemos el uso y las técnicas comunes.
Visible
Si no configura el atributo de desbordamiento, el valor del atributo de desbordamiento predeterminado es visible. Entonces, en general, no hay ninguna razón para establecer específicamente la propiedad de desbordamiento en visible a menos que desee anular el valor que está establecido en otro lugar.
Lo importante a recordar aquí es que aunque el contenido fuera del cuadro es visible, el contenido no afecta el flujo de trabajo de la página. Por ejemplo:
En términos generales, al menos no es necesario establecer una altura fija para los cuadros cuyo contenido es texto, por lo que no se encontrará con esta situación.
Oculto
El valor opuesto al valor predeterminado visible está oculto. Ocultará todo lo que esté fuera de la caja.
Esto es realmente útil para manejar contenido dinámico que puede causar algunos problemas de diseño debido al desbordamiento de contenido. Sin embargo, recuerde que el contenido oculto mediante este método no será visible en absoluto (a menos que mire el código fuente). Por ejemplo, algunos usuarios configuran la fuente predeterminada de su navegador para que sea más grande de lo esperado. Empujará algo de texto fuera del cuadro y lo ocultará por completo...