Creando un elemento que se desborda
Veamos un ejemplo clásico de un elemento que es muy pequeño para su contenido y que genera un desbordamiento, como todo es más sencillo verlo a través de ejemplos, primero veamos uno antes de pasar a ver las propiedades que nos ayudan a controlar el desbordamiento.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
width: 200px;
height: 100px;
border: medium double black;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
El código anterior nos genera el siguiente resultado en el navegador:
Como podemos observar el texto sobre pasa la capacidad del cuadro contenedor, para corregir esto podemos utilizar la propiedad overflow, veamos las propiedades antes de pasar a hacer la corrección a este problema:
overflow-x/overflow-y: Determinan el comportamiento del desbordamiento horizontal o vertical.
Overflow: Es un atajo para utilizar la propiedad anterior y el orden en que actua es overflow, overflow x, overflow y.
Las propiedades que pueden utilizarse con el elemento overflow son las siguientes:
auto: Este valor le delega al navegador la responsabilidad de decidir qué hacer, usualmente lo que pasa es que una barra de scroll se muestra cuando el elemento se empieza a desbordar conteniendo a el mismo.
hidden: El contenido es mostrado hasta la parte que no se desborda ocultando el resto del contenido, no tiene mecanismos para indicarle al usuario que debe hacer para ver el resto del contenido.
no-content: El contenido desbordado es eliminado si no puede acomodarse dentro del contenedor. Este valor no es soportado por ninguno de los navegadores más populares
no-display: El contenido es ocultado si no se puede mostrar totalmente. Este valor no es soportado por ninguno de los navegadores más populares.
scroll: El navegador genera una barra de scroll permitiendo al usuario siempre poder ver el contenido desbordado dentro del contenedor. La barra va a depender del navegador y del sistema para definir la forma en que se muestra. La barra de scroll siempre estará visible aunque el elemento no se desborde.
visible: Este es el valor por defecto. El contenido siempre es mostrado aunque se desborde.
Ahora que ya tenemos las herramientas de como atacar un desbordamiento veamos en la práctica cómo podemos aplicarlo, nada mejor que un poco de código para demostrarlo:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
width: 200px;
height: 100px;
border: medium double black;
}
#first {overflow: hidden;}
#second { overflow: scroll;}
</style>
</head>
<body>
<p id="first">
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p id="second">
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
Hemos utilizado dos elementos para demostrar cómo trabaja el overflow, en el primero colocamos la propiedad hidden donde sabemos que solo se mostrará el contenido hasta donde empiece el desborde luego el resto se oculta y para el segundo utilizamos scroll, con el cual se mostrará una barra de scroll se desborde o no el elemento, veamos el resultado:
