Abr032013

Generar un Scroll con la propiedad Overflow.

Cuando publicas código a veces las lineas son tan largas que se salen de su elemento contenedor, solapando elementos adyacentes y dejando nuestra plantilla con un pésimo aspecto, muy poco profesional.

Overflow” es la propiedad “CSS” que nos permite generar un “Scroll” cuando el contenido excede los limites ancho (width) y alto (height) del elemento contenedor.

El valor por defecto de la propiedad “overflow” es “visible“, responsable de que los elementos siempre lo sean y de que se salgan del elemento contenedor.

También disponemos del valor “hidden“, el cual se utiliza cuando se desconoce la cantidad de contenidos que se alojarán dentro del elemento contenedor, ocultando todos los que se salgan del mismo. En el caso que nos ocupa dicho valor es inapropiado, pues necesitamos que se vean todos los contenidos.

Existen dos soluciones, una sería la utilización del valor “scroll“. La propiedad “overflow: scroll” hace que los navegadores muestren en el elemento contenedor dos barras scroll, una vertical y otra horizontal, sin tener en cuenta que los contenidos se salgan horizontal o verticalmente.

La mejor solución está en el valor “auto“, así el navegador solo mostrara las barras que sean necesarias y si no lo son no mostrara ninguna. No cabe la menor duda sobre su valor estético, por esa razón la propiedad “overflow: auto” es la más usada.

Hasta aquí todo bien, pero ahora necesitamos su aplicación práctica y es ahí donde los poco iniciados tienen las mayores dificultades.

Recordemos que para mantener el formato, el código debe ir entre las etiquetas <pre> </pre>.

La solución consiste en editar la hoja de estilos CSS (style.css) de nuestra plantilla.
Una vez abierta, localizamos el “selector” “pre” y le añadimos al final la propiedad “overflow: auto“. Quedando algo parecido a esto:

pre {
	padding: 9px;
	background: #f9f9f9;
	border: 1px solid #ccc;
        overflow: auto;
	}

Aquí podéis ver el efecto que tiene en mi plantilla.

Te podría interesar:
Convertir HTML a texto plano.

Política de comentarios

Dada la importancia de los comentarios como espacio de participación, te pedimos por favor que leas detenidamente y cumplas con las siguientes normas de participación.

Deja un comentario

Tu dirección de correo electrónico no será publicada.