La propiedad 'overflow' se aplica a los elementos de bloque
(por ejemplo: BLOCKQUOTE, DIV, H1/H6,
HR, P, PRE) y también a los elementos
reemplazados (como IMG). Primero vamos a crear un elemento <PRE>
que tiene asignadas las siguientes propiedades:
PRE { background-color: #FFFFCC;
color: blue;
border: 1px solid green;
width: 50%;
height: 12em; }A: Enlace de hipertexto o destino de un link ABBR: Abreviatura ACRONYM: Acrónimo ADDRESS: Dirección AREA: Area de un mapa de imagen B: Texto en negritas
El elemento ocupa un 50% del ancho de la página y una
altura aproximada al doble del texto que contiene. Repetimos el ejemplo, esta
vez reduciendo su tamaño a la mitad (width: 25%; height:
6em):
A: Enlace de hipertexto o destino de un link ABBR: Abreviatura ACRONYM: Acrónimo ADDRESS: Dirección AREA: Area de un mapa de imagen B: Texto en negritas
Esto es lo que sucede: el fondo de color indica el tamaño que tiene el elemento; en el segundo caso (según la resolución de su monitor, puede suceder también en el primer caso) el contenido sobresale de ese fondo. En esos casos, se dice que el contenido está desbordando la caja que lo contiene.
Como el valor inicial para la propiedad 'overflow'
es 'visible', el texto que desborda es procesado fuera de la caja
del elemento <PRE>. Ahora, repetimos el segundo ejemplo aplicando
los otros valores que puede tener 'overflow':
Con overflow: hidden
Con overflow: scroll
A: Enlace de hipertexto o destino de un link ABBR: Abreviatura ACRONYM: Acrónimo ADDRESS: Dirección AREA: Area de un mapa de imagen B: Texto en negritas
Con overflow: auto
A: Enlace de hipertexto o destino de un link ABBR: Abreviatura ACRONYM: Acrónimo ADDRESS: Dirección AREA: Area de un mapa de imagen B: Texto en negritas
El valor hidden provoca que el texto que desborda
la caja sea recortado, de modo que sólo pueda verse una parte del mismo.
Los valores scroll y auto también recortan
el texto pero aparecen unas barras de desplazamiento que permiten hacer un scroll
para ver las partes ocultas.