Cada elemento de una página es un cuadro rectangular. El tamaño, la posición y el comportamiento de estos cuadros se pueden controlar a través de CSS. Por comportamiento, me refiero a cómo lo maneja la caja cuando cambia el contenido dentro y alrededor de ella. 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 una altura o un ancho específico en un cuadro y el contenido del interior no cabe? Ahí es donde entra en juego la propiedad de desbordamiento de CSS, que le permite especificar cómo le gustaría que se manejara.
Hay cuatro valores para la propiedad de desbordamiento: visible (defecto), oculto, Desplazarse, y auto. También hay propiedades hermanas overflow-y y overflow-x, que disfrutan de una adopción menos generalizada.
Echemos un vistazo a cada uno y luego discutamos algunos usos comunes y peculiaridades.
Visible
Si no establece la propiedad de desbordamiento en absoluto, el valor predeterminado es visible. Por lo tanto, en general, no hay razón para configurar explícitamente esta propiedad como visible a menos que la anule para que no se configure en otro lugar.
Lo importante a recordar aquí es que aunque el contenido es visible fuera de la caja, ese contenido no afecta el flujo de la página. Por ejemplo:
En general, no debería establecer alturas estáticas en cuadros con texto web de todos modos, por lo que no debería aparecer.
Oculto
Lo contrario de lo predeterminado visible es oculto. Esto literalmente oculta cualquier contenido que se extienda más allá de la caja.
Esto es particularmente útil cuando se usa con contenido dinámico y la posibilidad de que un desbordamiento cause serios problemas de diseño. Sin embargo, tenga en cuenta que el contenido que se oculta de esta manera es completamente inaccesible (a menos que vea la fuente). Entonces, por ejemplo, un usuario tiene un tamaño de fuente predeterminado más grande de lo que esperaría, es posible que esté empujando el texto fuera de un cuadro y ocultándolo completamente de su vista.
Desplazarse
Establecer el valor de desbordamiento de un cuadro para desplazarse ocultará el contenido para que no se represente fuera del cuadro, pero ofrecerá barras de desplazamiento para desplazarse por el interior del cuadro para ver el contenido.
Cabe destacar que con este valor obtiene AMBAS barras de desplazamiento horizontales y verticales sin importar qué, incluso si el contenido requiere solo una u otra.
Auto
El desbordamiento automático es muy similar al valor de desplazamiento, solo que resuelve el problema de obtener barras de desplazamiento cuando no las necesita.
Compensación flotante
Uno de los usos más populares del ajuste de desbordamiento, por extraño que parezca, es la limpieza de flotadores. La configuración de desbordamiento no borra el flotador en el elemento, se borra automáticamente. Esto significa que el elemento con desbordamiento aplicado (auto o oculto), se extenderá tanto como sea necesario para abarcar los elementos secundarios que flotan (en lugar de contraerse), suponiendo que no se declare la altura. Como esto:
Hay más detalles sobre esto y los flotadores en general en el artículo Todo sobre los flotadores.
Inquietudes entre navegadores
Como la mayoría de las cosas en CSS, hay muchas peculiaridades entre navegadores con desbordamiento. Aquí están:
Barras de desplazamiento dentro o fuera de la caja?
Firefox los pone afuera, IE los pone adentro. Creo que solo IE realmente entiende esto correctamente (debería estar adentro).
Asegúrese de tener en cuenta esta diferencia sustancial.
Error de caja de expansión de IE 8
Hay muchos errores nuevos y divertidos, incluidos algunos muy serios que ocultan páginas web enteras, con IE. Más detalles aquí.
Rompiendo diseños flotantes
IE 6, 7 y 8 arruinan el desbordamiento predeterminado visible y expandirán un cuadro horizontalmente para que quepa el contenido (probablemente una imagen). Esto es especialmente doloroso para los diseños creados en columnas flotantes, y una sola columna expandida puede empujar otras columnas hacia abajo y causar algunos diseños bastante dañados.
¿Se pueden diseñar las barras de desplazamiento con CSS?
IE solía permitir esto en versiones anteriores de IE, pero desde entonces se suspendió. Los navegadores WebKit/Blink lo permiten y aquí hay información al respecto. Sin embargo, no es estándar y no está claro si los organismos de estándares están interesados en estandarizarlo. Si necesita absolutamente barras de desplazamiento personalizadas entre navegadores, deberá manejarlas de forma personalizada con JavaScript. Aquí hay un comienzo simple y aquí hay un hilo de StackOverflow con recomendaciones.
truco
IE muestra una barra de desplazamiento vertical todo el tiempo, ya sea que la necesite o no. Esto puede ser bueno para prevenir saltos horizontales, pero no siempre es deseable. Para eliminar esto en IE, puede configurar el desbordamiento en automático en el elemento del cuerpo.
Manifestación
Demostraciones para este artículo tomadas de esta página de muestra.