Overflow-x/overflow-y
With the overflow property, CSS already provided a mechanism for clipping the content of an element. The CSS3 basic box model module adds to this by allowing the content to be clipped on just one axis. overflow-x controls the horizontal or left and clipping and overflow-y controls the vertical or top and bottom clipping. The overflow property can now be given two values, the first is the equivalent of overflow-x and the second for overflow-y. If only one value is given it controls both axis, like previous behaviour.
Support for these properties is strong as they were first defined by IE6. They are supported in Firefox 1.1+, WebKit and will be supported in Opera 9.5 (currently in Alpha).
The following divs show the possible values in the CSS3 spec for the two properties. They have a bottom margin set to stop the text from overlapping the div below, and a height of 5em.
Visible overflow
This box usesoverflow-x: visible;. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien erat, iaculis non, lacinia ac, molestie sit amet, libero. Duis pharetra. Phasellus purus elit, eleifend eu, convallis eget, molestie sit amet, elit.
Due to the div having a height smaller than the contents, the text should overflow below the box and be visible. This is the same behaviour as if overflow-x: visible; had not been set.
This box uses overflow-y: visible;.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien erat, iaculis non, lacinia ac, molestie sit amet, libero. Duis pharetra. Phasellus purus elit, eleifend eu, convallis eget, molestie sit amet, elit.
The text should overflow out of the box to the right. Without white-space: nowrap it would look the same as the previous example.
Hidden overflow
The text should be clipped so no text is shown outside the box and no scrollbars are visible.
The text overflow should be hidden without any scrollbars.
Scrolling overflow
This box uses overflow-x: scroll;.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien erat, iaculis non, lacinia ac, molestie sit amet, libero. Duis pharetra. Phasellus purus elit, eleifend eu, convallis eget, molestie sit amet, elit.
A horizontal scrollbar should be shown.
This box uses overflow-y: scroll;.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien erat, iaculis non, lacinia ac, molestie sit amet, libero. Duis pharetra. Phasellus purus elit, eleifend eu, convallis eget, molestie sit amet, elit.
A vertical scrollbar should be shown.