Lección 17: Overflow
Nos permite gestionar los desbordamientos o casos donde el contenido escapa de los límites del elemento.
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;
}
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.
overflow-y
Especifica únicamente el eje vertical.
.elemento {
overflow-y: hidden;
}
overflow-x
Especifica únicamente el eje horizontal.
.elemento {
overflow-x: visible;
}
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
divcon su explicación. - La explicación no debe superar los
10remde 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.
¿Me ayudas?
No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios