Hay situaciones en las que el contenido que queremos poner puede desbordar del tamaño de la capa en la que están contenidos. En este sentido ya vimos como controlar el overflow de una capa.
Ahora vamos a ver un caso práctico del uso de las capacidades CSS. Y es el que se produce, por ejemplo, al añadir código fuente que quieras mostrar en una página. Cosa que nos pasa ya en nuestros códigos fuente (y que deberíamos de subsanar). Así que veamos como podemos poner código fuente en una capa con scroll.
En este caso, ya que el contenido el código fuente y los caracteres pueden ser variopintos, va dentro de etiquetas PRE.
< pre class="codigo" >
< /pre >
La idea es ahora que el código fuente nos aparezca en una capa con scroll. Para ello vamos a manejar la propiedad CSS overflow. Lo que vamos a indicar, es que en caso de que haya overflow, se aplique un scroll.
El código CSS sería el siguiente:
.codigo{
width:400px;
height:300px;
display:block;
overflow:scroll
}
De esta forma sencilla podremos tener capas en las cuales mostrar el código fuente. Sencillo verdad… Ahora solo queda que lo apliquemos a Linea de Código. :-D
