CSS GUIDE OVERFLOW
This document is a work in progress and is subject to change.
Contents
Summary
The overflow property specifies whether the content of a block-level or replaced element is clipped when it overflows the element's box. The overflow property affects the clipping of all of the element's content but it does not affect any descendant elements respective content and descendants.
In CSS 3, Overflow is a shorthand property for the overflow-x and overflow-y properties. It sets those properties to the same value.
| Applicability: | The overflow property affects non-replaced block-level elements, table cells, and inline-block elements. | |
| Media Group: | Visual | |
| Inherited: | No |
Syntax
TARGET_ELEMENT{ overflow: visible|hidden|scroll|auto }
Legal Values
The legal values of the visiblity property are:
- visible: This value indicates that content is not clipped and it may be rendered outside the element's box.
- hidden: This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region.
- scroll: This value indicates that the content is clipped and that if the user agent uses a scrolling mechanism that is visible on the screen, that mechanism should be displayed for a box whether or not any of its content is clipped.
- auto: The behavior of the this value is user agent dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
Mozilla Recommended Values
Usage Examples
/* Set the overflow to visible */
div { overflow: visible }
/* Set the overflow to hidden */
div{ overflow: hidden }
/* Set the overflow to scroll */
div { overflow: scroll }
/* Set the overflow to auto */
div { overflow: auto }
