CSS Overflow

La propiedad <overflow> en CSS controla qué ocurre cuando el contenido de un elemento supera el ancho o alto definido. Permite elegir si se oculta el exceso, aparece una barra de desplazamiento o se ajusta automáticamente.

Fundamentos de overflow

La propiedad <overflow> puede tener cuatro valores principales: visible (por defecto, el contenido sobresale), hidden (el contenido sobrante se oculta), scroll (siempre aparece una barra de desplazamiento) y auto (aparece solo si es necesario).

En este ejemplo, el contenido sobresaldría de la caja, pero con <overflow: hidden;> se oculta el exceso:

Comparación de valores de overflow

Hidden, scroll y auto ofrecen distintas formas de manejar el contenido. Scroll muestra siempre la barra, mientras que auto solo cuando hace falta.

Configuraciones específicas por eje

Con <overflow-x> y <overflow-y> se puede controlar por separado el desbordamiento horizontal y vertical. Útil cuando, por ejemplo, solo quieres permitir scroll horizontal.

Overflow en elementos inline

Overflow no solo importa en elementos block: también se puede manejar en elementos inline-block.

Overflow y Flexbox

En diseños con Flexbox, overflow asegura que los elementos demasiado grandes sigan siendo desplazables.

Text-overflow: ellipsis

Con text-overflow: ellipsis el texto demasiado largo se acorta con tres puntos (...) si no cabe en la caja.

Consejos para usar overflow

El uso correcto de overflow ayuda a evitar problemas inesperados de diseño y mejora la claridad del contenido:

• Comprueba siempre cómo se comporta el contenido en diferentes tamaños de pantalla.
• Usa <overflow: auto;> para mejorar la experiencia de usuario evitando barras de scroll innecesarias.
• Con configuraciones específicas por eje puedes controlar exactamente la dirección del scroll.