CSS Overflow

Too Narrow

Sometimes the content you have is too wide for the box or page you're display it on. This is particularly true if its code examples using <pre>.

To handle the problem CSS provides 'Overflow' property. It works really simply. Place the wide text in a <div>, set a width for the div then add 'overflow:auto' property.

As you probably guessed, its in two parts, CSS and HTML. First the CSS:

.scroll {
    width:200px;
    overflow:auto;
}

The HTML:

<div class="scroll">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Here's the result:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua