CSS: La propiedad overflow (contenido sobrante)

Normalmente, los contenidos de un elemento se pueden mostrar en el espacio reservado para ese elemento. Sin embargo, en algunas ocasiones el contenido de un elemento no cabe en el espacio reservado para ese elemento y se desborda.

La situación más habitual en la que el contenido sobresale de su espacio reservado es cuando se establece la anchura y/o altura de un elemento mediante la propiedad width y/o height.

CSS define la propiedad overflow para controlar la forma en la que se visualizan los contenidos que sobresalen (sobrantes) de un elemento.

Los posibles valores para la propiedad overflow son los siguientes:

visible | hidden | scroll | auto

- overflow: visible: Es el valor por defecto.

- overflow: hidden: el contenido sobrante se oculta y únicamente se visualizará la parte del contenido que cabe dentro de la zona reservada para el elemento.

- overflow: scroll: solamente se visualiza el contenido que cabe dentro de la zona reservada para el elemento, pero se muestran barras de scroll que permiten visualizar el resto del contenido.

- overflow: auto: el comportamiento depende del navegador, aunque normalmente es el mismo que la propiedad scroll. Obviamente, es un comportamiento totalmente desaconsejado.

La siguiente imagen muestra visualmente el comportamiento de la propiedad overflow:

El código HTML y CSS del ejemplo anterior se muestran a continuación:

.primero, .segundo, .tercero {
/*atributos en común en los 3 divs. Toma el valor overflow por defecto.*/
display: inline;
float: left;
margin: 1em;
padding: .3em;
border: 2px solid #555;
width: 100px;
height: 150px;
font: 1em Arial, Helvetica, sans-serif;
} .segundo{ overflow: visible;} .tercero{ overflow: scroll;} <div class="primero"><h1>overflow: visible</h1> Lorem ipsum dolor sit amet, consectetuer... </div> <div class="segundo"><h1>overflow: hidden</h1> Lorem ipsum dolor sit amet, consectetuer... </div> <div class="tercero"><h1>overflow: scroll</h1> Lorem ipsum dolor sit amet, consectetuer... </div>


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO