La propiedad Overflow es de gran utilidad en la maquetación de una web y su función es la de recortar aquellos contenidos que sobrepasan el tamaño de su contenedor.
Cómo ya sabemos, cuando tenemos una caja o un contenedor, lo normal es que si no definimos una altura o una anchura la caja en cuestión adapte sus dimensiones al tamaño su contenido. Pero cuando estamos maquetando una web, normalmente queremos mantener ciertas proporciones en el diseño, razón por la cual nos vemos obligados a asignar a las cajas o contenedores una dimensión determinada, es decir, tenemos que definirle una anchura y una altura. Cuando esto sucede, muchas veces los contenidos de esas cajas se suelen desbordar. La forma de corregir esto es mediante la propiedad overflow.
La sintaxis es la siguiente:
overflow: visible | hidden | scroll | auto
- visible: Este es el comportamiento por defecto y con el mismo el contenido se desborda.
- Hidden: el navegador oculta la parte del contenido que se desborda.
- Scroll: el contenido se mantiene visible en su totalidad, gracias a que el navegador agrega barras de desplazamiento que tener acceso al resto del contenido que no es visible.
- Auto: el comportamiento depende del navegador, aunque normalmente es el mismo que la propiedad scroll.
Para ver cómo funciona vamos a crear las siguientes estructuras HTML:
<div id="overflowTest1">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit augue duis te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
</div>
<br><br>
<div id="overflowTest2">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit augue duis te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
</div>Luego aplicamos las siguientes reglas CSS:
#overflowTest1 {
background: #4CAF50;
color: black;
padding: 15px;
width: 50%;
height: 100px;
border: 1px solid #ccc;
}
#overflowTest2 {
background: #CCC;
color: black;
padding: 15px;
width: 50%;
height: 100px;
border: 1px solid #ccc;
}Este es el resultado:
See the Pen Contenido que se desborda by simplicitytree (@simplicitytree) on CodePen.
Vemos que al aplicar una altura y una anchura los textos exceden esas dimensiones y se desbordan. Para corregir esto podemos aplicar la propiedad overflow: hidden, si queremos que el navegador oculte la parte del contenido que se desborda, o overflow: scroll para que el contenido se mantenga visible en su totalidad al agregar barras de desplazamiento para tener acceso al resto del contenido que no es visible.
En el recuadro de abjo podemos ver resultado con la propiedad overflow:
See the Pen Propiedad Overflow by simplicitytree (@simplicitytree) on CodePen.
OVERFLOW-X y OVERFLOW-Y
CSS también dispone de otras propiedades hermanas que permiten controlar tanto el desbordamiento vertical y horizontal de una caja o contenedor. Estas propiedades son overflow-x y overflow-y, y por cierto, los valores de estas propiedades son exactamente los mismos que acabamos de ver con la propiedad overflow.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
