> Manuales > Manual de CSS 3

Descripción de los atributos de CSS3 overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando sobrepasa los límites de un contenedor en la horizontal o vertical.

En este artículo nos disponemos a analizar los atributos de hojas de estilo en cascada, en su tercera versión (CSS3), overflow-x y overflow-y. Estas son dos de las novedades de este lenguaje para definición de estilos en páginas web, que estamos comentando en el Manual de CSS3.

Realmente, aunque se trata de dos atributos nuevos en CSS3, el concepto de overflow no resultará tan novedoso para los estudiosos de las hojas de estilo, puesto que ya viene de versiones anteriores. En CSS2 se incorporó el atributo overflow que, como quizás sepas, sirve para indicar al navegador qué hacer cuando un contenido sobrepasa los límites de un contenedor. Sin embargo, ambos atributos ya estaban en el tintero del W3C desde hace tiempo, tanto es así que navegadores tan antiguos como Internet Explorer 6, tienen una implementación parcial de overflow-x y overflow-y , a pesar de haber sido incluidos formalmente en CSS a partir de la tercera versión del lenguaje.

Como habrás podido experimentar, de manera predeterminada, cuando un contenido sobrepasa los límites de las dimensiones de la capa donde está situado, el navegador lo muestra igualmente. En algunos casos, como podrás ver en Internet Explorer (al menos en versiones antiguas), ajusta las dimensiones de esa capa contenedora para que ese contenido se pueda ver en el navegador. En otros casos muestra igualmente el contenido, aunque fuera del área del contenedor (sin modificar las dimensiones del contenedor, como hace Firefox o Chrome). Pero ese comportamiento no es siempre el que deseamos y para ello se utiliza el atributo overflow.

Pues bien, overflow-x y overflow-y sirven para exactamente lo mismo que overflow, pero con la diferencia que permiten especificar los comportamientos del navegador por separado, cuando surge un desbordamiento de un contenido en la horizontal y en la vertical respectivamente.

Referencia: Nos hemos apoyado en la descripción de overflow para explicar lo que significa overflow-x y overflow-y. No obstante, si esa regla de estilo resulta nueva para ti y deseas entenderla mejor, te recomendamos leer el artículo El atributo Overflow de CSS.

Valores posibles para overflow-x y overflow-y

En estos dos nuevos atributos podemos colocar varios valores distintos, que nos servirán para definir diferentes tipos de comportamientos ante el desborde del contenido de una capa. Tanto overflow-x como overflow-y comparten el mismo abanico de valores posibles, pero los podemos especificar por separado, para la coordenada X y la Y. De ese modo, no tienen por qué definirse los mismos valores cuando surgen desbordamientos en la horizontal y en la vertical. Como se puede comprobar, las opciones son diversas y permitirían bastantes combinaciones distintas para comportamientos en una capa, definiendo por separado lo que debe ocurrir en la horizontal y en la vertical.

Merece la pena comentar un detalle sobre el comportamiento predeterminado de estos atributos. Como se dijo, en caso que no se especifique nada en overflow-x u overflow-y, sería como si hubiésemos aplicado el valor visible. Sin embargo, si definimos solamente uno de ellos, el otro ya no tendría visible como valor predeterminado, sino auto.

Podemos ver varios ejemplos de la combinación de varios valores de overflow-x y de overflow-y.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual