overflow

The overflow property lets you choose what happens when the contents of a tag do not fit in the rectangle defined by the top, left, height and width properties. There are four possible values:

• Visible. Expands the size of the tag to fit all of the contents. This is the default
• Hidden. Clips the size of the tag to match its size. Part of the content won’t appear
• Auto. Clips the size of the tag but displays scroll bars so you can look at the rest of the content
• Scroll. Clips the size of the tag but displays scroll bars whether you need them or not

If you set the overflow property to the value visible, the browser does not clip the content. The content outside the display area will appear and it will probably interfer with or cover up adjacent tags. This is the default behavior for most HTML tags. The idea behind this is that even though the display may be ugly, at least all the content is presented.

The first step might be to use the value hidden. This hides any that won't fit. The content is there, you just can't see it.

Alternatively, use the value scroll. In this case, the is hidden, but the browser creates scrollbars so that you can scroll and see the hidden content. The size and style of the scrollbars depends on the browser but the scroll bars always appear even if the content fits in the display area.

Finally, you can specify auto as the value. This lets the browser decide what to do. It'll probably create scrollbars.

Here are a couple of examples: