There are situations in which the content we want to put can exceed the size of the layer in which they are contained. In this sense we already saw how control the overflow of a layer.
Now we are going to see a practical case of using the capabilities CSS. And it is what occurs, for example, when adding source code that you want to display on a page. Something that already happens to us in our source codes (and that we should correct). So let’s see how we can put source code on a layer with scroll.
In this case, since the content, source code and characters can be varied, it goes inside tags PRE.
< pre class="code" >
< /pre >
The idea is now that the source code appears in a scrollable layer. For this we are going to manage the property CSS
overflow. What we are going to indicate is that in case there is overflow, a scroll is applied.
The code CSS would be the following:
.code{
width:400px;
height:300px;
display:block;
overflow:scroll
}
In this simple way we can have layers in which to show the source code. Simple really… Now we just have to apply it to Line of Code.