Lección 14: Overflow | Curso CSS

Lección 14: 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.

Actividad 1

Vamos a ayudar a unos visitantes a comprender 3 tipos de arquitecturas: victoriana, Barroca y moderna.

  • Debe tener un título por cada tipo de arquitectura.
  • Debajo de cada uno, existirá un div con su explicación.
  • La explicación no debe superar los 10rem de altura.
  • Los textos deben desbordar la altura, sobresaliendo por debajo.
  • El visitante debe usar un scroll para navegar por toda la explicación.

Puedes usar Wikipedia para conseguir los textos.

Actividad 2

A partir del siguiente HTML.

<table>
    <caption>Mi tabla</caption>
    <thead>
        <tr>
            <th>Título 1</th>
            <th>Título 2</th>
            <th>Título 3</th>
            <th>Título 4</th>
            <th>Título 5</th>
            <th>Título 6</th>
            <th>Título 7</th>
            <th>Título 8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
        </tr>
    </tbody>
</table>

Piensa una manera de adaptarla a Smartphone.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario