desbordamiento de contenido

desbordamiento de contenido

Los estilos CSS 2.1 nos permiten usar la propiedad overflow para gestionar el contenido cuando este último es mayor que el contenedor. Se trata del famoso principio del "desbordamiento de contenido".

CSS3 (http://dev.w3.org/csswg/css-overflow-3) nos propone dos nuevas propiedades para gestionar el desbordamiento: overflow-x: para gestionar el desbordamiento horizontal. overflow-y: para gestionar el desbordamiento vertical.

Los valores posibles son los mismos que en CSS 2.1: visible: el contenido permanece siempre visible. hidden: el contenido permanece siempre oculto. scroll: se puede acceder al contenido gracias a una barra de desplazamiento que permanece siempre visible. auto: se puede acceder al contenido gracias a una barra de desplazamiento que solamente se muestra si resulta necesario.

Analicemos las dos cajas del siguiente ejemplo: la segunda, #miCaja2, usa las propiedades overflow-x: scroll y white-space: nowrap, que es indispensable para la visualización de la barra de desplazamiento.

#miCaja1 {

width: 250px;

height: 100px;

border: 1px solid #333;

padding: 0;

overflow: auto;

margin-bottom: 30px;

}

#miCaja2 {

width: 250px;

height: 100px;

border: 1px solid #333;

padding: 0;

overflow-x: scroll;

white-space: nowrap;

}

.sinMargen {

margin: 0;

}

Veamos el resultado visual obtenido. La primera caja es #miCaja1 y debajo tenemos la caja #miCaja2: