EL atributo Overflow de CSS

  • Por
Explicamos esta propiedad interesante contemplada en la especificación CSS 2.
En este artículo del Manual de CSS de DesarrolloWeb.com vamos a explicar una propiedad interesante de CSS, contemplada en la especificación CSS 2, Overflow. Es un atributo de esos que nos servirán para maquetar las capas de una web de una manera más versátil y detallada.

Overflow sirve en el modelado de cajas para indicar al navegador qué es lo que debe hacer con el contenido que no cabe dentro de una capa, según las dimensiones que se le han asignado.

Como sabemos, a las capas (elementos DIV) podemos asignarles un tamaño, en anchura y altura. Pero muchas veces el contenido que colocamos en la capa sobrepasa el espacio que hemos destinado a ella. Entonces lo que suele ocurrir es que la capa crece lo suficiente para que el contenido colocado dentro quepa. Habitualmente las capas crecen en altura, por lo que a más contenido más tamaño tendrá en altura. Este es un comportamiento que podemos alterar con el uso del atributo overflow.

Dicho de otro modo, overflow permite que se recorte el contenido de una capa, para mostrar únicamente el contenido que quepa, según sus dimensiones. Para acceder al contenido que no se muestra, porque no cabe en la capa, se puede configurar overflow para que aparezcan unas barras de desplazamiento.

Así pues, pasemos directamente a ver cuáles son los atributos posibles con el atributo overflow:

  • visible: Este valor indica que se debe mostrar todo el contenido de la capa, aunque no quepa en tamaño con la que la hemos configurado. En Internet Explorer ocurre que capa crece en tamaño lo suficiente para que quepa todo el contenido que hemos colocado dentro. En Firefox ocurre que la capa tiene el tamaño marcado, pero el contenido se sigue viendo, aunque fuera del espacio donde de la capa, pudiendo superponerse a un texto o imagen que hubiera debajo. El contenido no se recorta en caso alguno, es decir, siempre estará visible.
  • hidden: Este valor indica que los contenidos que, por el tamaño de la capa, no quepan en la misma, se deben recortar. Por ello, la capa tendrá siempre el tamaño configurado, pero los contenidos en ocasiones podrán no verse por completo.
  • scroll: Este valor indica que la capa debe tener el tamaño que se haya configurado inicialmente y que además se deben mostrar unas barras de desplazamiento, para mover el contenido de la capa dentro del espacio de la misma. Las barras de desplazamiento siempre salen, se requieran o no.
  • auto: Con este valor también se respetarán las dimensiones asignadas a una caja. El contenido será recortado, pero aparecerán las barras de desplazamiento para moverlo. Sin embargo, en este caso las barras de desplazamiento podrán salir o no, depende de si son necesarias o no para ver todo el contenido de la capa.
Así pues, el atributo overflow nos permitirá tener un mayor control sobre los espacios que destinamos a cada caja de nuestro diseño. Es muy utilizado para mostrar textos largos, que se desean integrar dentro de otro texto o una interfaz donde no tenemos espacio disponible para colocarlos o no deseamos que crezcan más de la cuenta. Por ejemplo para mostrar código fuente dentro del texto de un artículo, como sigue:

<html>
<head>
   <title>Título</title>
</head>

<body>

Cuerpo...

</body>
</html>

Este ejemplo, habremos podido apreciar la barra de desplazamiento vertical, se obtiene con un atributo overflow: auto;. El código utilizado es como sigue:

<div style="overflow: auto; width: 300px; height: 100px; background-color:#ededed; border: 1px solid #990000;">
CONTENIDO....
</div>

Ahora veamos otro ejemplo, en el que simplemente se recorta el texto que no cabe en la capa. Hemos indicado overflow: hidden, por lo que el texto que sobra no se va a visualizar.

Esta capa tiene un contenido mayor del que cabe en el espacio que he asignado con el atributo width y height. Como le he puesto overflow: hidden, lo que ocurrirá es que parte del texto que estoy colocando no se va a ver...

En este caso vemos como el texto aparece recortado, porque no cabe en el espacio asignado de la capa. El código sería como el que sigue:

<div style="overflow: hidden; width: 200px; height: 50px; border: 1px solid #990000;">
CONTENIDO...
</div>

Aquí se pueden ver varios ejemplos de uso de overflow.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Walter

05/2/2009
Excelente artículo, justo lo que estaba buscando

Muchas Gracias y Suerte

wowweed

17/11/2009
excelente articulo
muy buena explicación pero ahora necesito que el scroll avanze cuando se insertan nuevas lineas (estoy haciendo un chat) xD podias ponerlo avazo como "Truco" xD salu2

Coni

23/8/2011
Genial
Muy claro, justo lo que estaba buscando, gracias!

jose

17/12/2011
muy bueno
excelente articulo.

ttimagina

18/2/2012
COnsulta
Muy bueno el articulo, endenti el atributo, lo único que falto es la opción ¨inherit¨? que función cumple el ovweflow: inherit;. desde ya gracias !!!

jocelyn

02/3/2012
hola
hola muchas gracias por la información,me ayudo mucho

Daniel

03/7/2012
Tamaño del Div
¿Es posible darle tamaño a un Div y que este crezca si el contenido del Div es mayor que este?

carbu

05/2/2014
Agradecimiento
Hola: ... siempre es grato encontrar información corta clara y precisa. Se le agradece.
Saludos.-

Ronald J.

23/5/2014
Gracias
Me fue de mucha ayuda :)

Ady07

16/6/2014
Pregunta de attributo overflow
El atributo overflow, se puede hacer adaptar la barra para ser mas grande?, por ejemplo un grosor de 20px necesito ayuda con eso

Cecilia

30/9/2014
Cambiar el color
Se puede cambiar el color de la barra de desplazamiento? Gracias y saludos