Lección 13: Overflow

Nos permite gestionar los desbordamientos o casos donde el contenido escapa de los límites del elemento.

Album 1 Album 2 Album 2

overflow

Siempre será visible, aunque exista un desbordamiento.

.elemento {
  overflow: visible;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

Ocultará el contenido.

.elemento {
  overflow: hidden;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

Se comporta igual que hidden, pero añade un padding en el límite del desbordamiento. Actualmente solo funciona con navegadores basados en Chromium.

.elemento {
  overflow: clip;
  overflow-clip-margin: 1rem;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

Dependiendo del sistema operativo ocurren diferentes situaciones. En Windows mostrá las barras de scroll aunque no sean necesarias, mientras que en MacOS serán visibles solo en caso que sea necesario.

.elemento {
  overflow: scroll;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

Añade un scroll para desplazar el contenido solo en el caso que desborde.

.elemento {
  overflow: auto;
  /* Alternativa */
  overflow: hidden visible;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

Más información

overflow-y

Especifica únicamente el eje vertical.

.elemento {
  overflow-y: hidden;
}

Más información

overflow-x

Especifica únicamente el eje horizontal.

.elemento {
  overflow-x: visible;
}

Más información

Un mal Diseñador Web usa overflow-x: hidden sobre <body>. Un estilo muy común para esconder una maquetación deficiente en la gestión de tamaños. Lamentablemente habrá 2 temas que no podrá solucionar aunque añadas un !important: los desbordamientos y la vergüenza.

13-1 13-2

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario