Cook Computing

CSS Overflow Property

February 9, 2006 Written by Charles Cook

One of the reasons I've got rid of the right-hand column in this blog and moved to a fixed width is to provide more space for code fragments so that I can have up to 80 characters per line, the line length I normally code to, without having to worry about how the reader resizes their browser. This works until the reader increases the browser text size. Then the <pre> text will overflow rightwards in different ways according to the browser, the ugliest way being when the text bleeds out of its container.

The solution is to use the CSS overflow property. The implicit default value of this is that the text is rendered outside the block, as I mentioned above. The "scroll" overflow setting, which displays a scrollbar, is useful for when the text overflows but the scrollbar appears even when the text does not overflow, which doesn't look right. Unfortunately the setting we want here - scrollbar appearing only when text overflows - is not guaranteed to be available: "The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes". Firefox and Safari display a scrollbar but unsurprisingly IE6 and IE7 beta 2 do not.

For example, this code fragment:


public class Foo
{
    public static void Main()
    {
        Console.Writeline("This will overflow block when text size increased.");
    }
}

will look like this in Firefox when the browser text size is increased:

foo