Lección 17: Overflow | Curso CSS

Lección 17: 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 adaptar la tabla a Smartphone para que se pueda visualizar el contenido haciendo scroll.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario