Propiedad CSS overflow, excedente de contenido

En la unidad anterior vimos el comportamiento de los contenedores en CSS, veamos ahora cómo controlar el comportamiento del contenido que se encuentra en esos contenedores.

Propiedad CSS overflow

La propiedad overflow (desbordamiento o excedente) nos permite controlar el comportamiento del contenido que se encuentra en una caja o contenedor. Por lo tanto, mediante esta propiedad podremos especificar si queremos recortar un contenido, mostrar barras de desplazamiento o mostrar el contenido que excede de un elemento a nivel de bloque.

Valores de overflow

La propiedad overflow solo funciona sobre elementos de tipo bloque con una altura definida. Sus valores son los siguientes:

overflow: visible|hidden|scroll|auto;

• Overflow: visible (default). Por defecto la propiedad overflow es visible y lo que hace es que los contenidos se salgan del elemento y sean completamente visibles.

• Overflow: hidden. Los contenidos que se salen del contenedor padre se ocultan y no se muestran barras de scroll. De esta forma se puede controlar el tamaño del elemento y su contenido.

• Overflow: scroll. Se muestra una barra de scroll (horizontal y vertical) cuando los contenidos no caben en el contenedor o caja.

• Overflow: auto. El navegador es el que decide si se muestran las barras de scroll o si se extiende el contenedor. En cualquier caso, gracias a este valor nunca se permite que el contenido desborde al contenedor. Este valor es muy interesante ya que si el contenido se sale por un lado (horizontal o vertical), sólo se muestra la barra de scroll de ese lado.

Puede interesarte conocer también las propiedades overflow-x y overflow-y.

Ejemplo

Crea un contenedor con un ancho y alto fijo. Incluye en su interior un texto que exceda el espacio definido en el contenedor. Aplica los diferentes valores de la propiedad overflow y comenta sus diferencias.

0

Ejercicios propuestos

Actividad 9.

Utiliza la propiedad overflow con el valor «hidden» o «auto» para mostrar el texto de los artículos de la página del blog de tu proyecto web.