Cascading Style Sheets/Overflow
From WikiKnowledge
This property allows you to control what happens when content (text and images etc.) does not fit into the space available to it. The overflow property accepts these values:
| Value | Effect |
|---|---|
| visible | (Default) Show the overflowing content. |
| auto | Show scroll bars when the content overflows. |
| scroll | Always show scroll bars, even when the content fits in the space given to it. |
| hidden | Hide overflowing content. |
| inherit | Inherit this setting. |
The image on the right shows 4 red squares 100 pixels big. Each of these red squares has content in it that does not fit into the space it has been given. In the first example on the left the extra content simply spills out of the box. In the second example which has been set to overflow: auto; a scroll bar appears (only when needed) to let the user view the hidden content. The next box has been set to overflow: scroll; which means that both scroll bars always appear whether they are needed or not. Finally in the last box which has been set to overflow: hidden; the extra content is chopped off with no way for the user to view it.
[edit] overflow-x and overflow-y
These two properties allow you to control what happens when content overflows a boxes left and right sides separately from what happens when content overflows a boxes top and bottom sides. For example you might decide that a vertical scroll bar will appear when content is too long to fit in a box, however any words which are too long to fit will be hidden. This can be done with the following CSS:
overflow-x: hidden; overflow-y: auto;
