Some content in an element may fall outside the element's rendering
box for a number of reasons (negative margins, absolute positioning,
content exceeding the width/height set for an element, etc.) In
cases where this occurs, the 'overflow' property describes what to
do with the content outside the elements rendering area.
Allowed Values
inherit
CSS2
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
visible
CSS2 | IE4
Type: Explicit
Description:
Content is not clipped and may be rendered outside of the element's box.
hidden
CSS2 | IE4
Type: Explicit
Description:
Content is clipped and content outside of the element's box is not visible.
The size of the clipping region is defined by the 'clip' property.
scroll
CSS2 | IE4
Type: Explicit
Description:
Content is clipped as necessary, but scrollbars are made available
where necessary to view the additional, non-visible content. If the
Visual media in use is static (such as Print) the content should be
treated as if the value was 'visible'.
auto
CSS2 | IE4
Type: Explicit
Description:
This value is browser and media dependent, but should allow for a
scrollbar if possible in case of overflow.
In-Line: <blockquoteSTYLE="width: 50px;
height: 50px;
overflow:
scroll">text that scrolls if forced in the name of
decent CSS</blockquote>
Notes
Before its inclusion in CSS2, this property was first proposed in the W3C
Working Draft "Positioning HTML Elements with Cascading Style Sheets" (8/19/97,
http://www.w3.org/TR/WD-positioning)
Browser Peculiarities
Internet Explorer
4.0+:
- The default value for this property as applied to the BODY
element is "auto" not "visible".
- For TEXTAREA elements, a value of "hidden" eliminates scrollbars.
- The TABLE element supports this property with a default value
of "hidden".
5.0+:
- Table cell elements (TD/TH) support this property with a
default value of "hidden", if the 'table-layout' property is
set to "fixed".