CSS2 Overflow and clipping

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

A line cannot be broken, causing the line box to be wider than the block box.
A block-level box is too wide for the containing block. This may happen when an element's 'width' property has a value that causes the generated block box to spill over sides of the containing block.
An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the 'height' property, not by content height).
A box is positioned absolutely.
It has negative margins.

Whenever overflow occurs, the 'overflow' property specifies how (and whether) a box is clipped. The 'clip' property specifies the size and shape of the clipping region. Specifying a small clipping region may cause clipping of otherwise visible contents.

11.1.1 Overflow: the 'overflow' property

'overflow'

Value:	visible \| hidden \| scroll \| auto \| inherit
Initial:	visible
Applies to:	block-level and replaced elements
Inherited:	no
Percentages:	N/A
Media:	visual

This property specifies whether the content of a block-level element is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:

visible: This value indicates that content is not clipped, i.e., it may be rendered outside the block 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; users will not have access to clipped content. The size and shape of the clipping region is specified by the 'clip' property.
scroll: This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. When this value is specified and the target medium is 'print' or 'projection', overflowing content should be printed.
auto: The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

Even if 'overflow' is set to 'visible', content may be clipped to a UA's document window by the native operating environment.

Consider the following example of a block quotation (BLOCKQUOTE) that is too big for its containing block (established by a DIV). Here is the source document:



I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
- Groucho Marx

Here is the style sheet controlling the sizes and style of the generated boxes:

DIV { width : 100px; height: 100px;
     border: thin solid red;
     }

BLOCKQUOTE   { width : 125px; height : 100px;
     margin-top: 50px; margin-left: 50px;
     border: thin dashed black
     }

DIV.attributed-to { text-align : right; }

The initial value of 'overflow' is 'visible', so the BLOCKQUOTE would be formatted without clipping, something like this:

Rendered overflow [D]