overflow Description:
The overflow property tells the browser how to handle content that exceeds the physical bounds of its container element. For example, you might have a box that is set to 300x300 pixels, with an image inside that is 500x500 pixels. In standard HTML, the image would display the entire 500x500 pixels. With the CSS 2 overflow property, you can add scroll bars, cut the image off, or let it display as it normally would.
overflow in CSS Versions:
overflow Syntax:
overflow: visible | hidden | scroll | auto | inherit
visible
The content is not clipped and can be seen outside the box.hidden
The content is clipped and cannot be seen.scroll
The content is clipped, but scrollbars are displayed to show the missing content.auto
If there is extra content, scrollbars will be shown, and if there is not, no scrollbars will display.inherit
The element should have the same value as the parent element.
overflow Browser Support:
overflow Initial/Default Value:
visible
overflow Applies To:
Non-replaced block-level elements, table cells, and inline-block elements.
overflow Inheritance:
This property is not inherited.
overflow Media Type:
- Visual
overflow Examples:
Standard overflow property
<p style="clip: rect(5px 100px 30px 5px); overflow:scroll;">
This paragraph will be clipped into a rectangle, but the contents will be scrollable.
</p>
Setting the overflow on a div element
<div style="overflow:auto; width:300px; height:200px;">
... DIV contents
</div>
overflow Special Notes:
- Use with the clip style property to effectively control how excess text is handled on your web pages.
- Be sure to test this in various browsers, as some user agents have different effects.
More overflow Information
Return to the CSS 2 Style Properties Library
