Content Overflow

CSS features several properties related to whether content is displayed on the page, and how it is displayed. This discussion focuses on the properties that manipulate the visibility of the element:

overflow and clip
visibility

Content Overflow & Clipping

As you have seen in our discussion of the box model, an element box that is wider than its containing block can spill over the sides of the containing block. This is known as content overflow.

Other causes of overflow include:

A line cannot be broken, causing the line box to be wider than the element box.
An element's height exceeds an explicit height assigned to the containing block
A descendent box is positioned relatively or absolutely partly outside the box.
Note: Such boxes are not always cropped by the overflow property on their ancestors.
A descendent box has negative margins, causing it to be positioned partly outside the box.
The text-indent property causes an inline box to hang off either the left or right edge of the element box.

Content overflow is generally undesirable and CSS provides ways to circumvent this.

In cases where the content area is fixed, the overflow property can be used to control how overflowing content is viewed. The clip property is used to further define the appearance of the overflowing content within the confined viewing area created by the overflow property.

The Overflow Property

A web designer can use the CSS overflow property to confine the visibility of overflowing content, and to control how overflowing content is viewed within the confined area. Whenever overflow occurs, the overflow property specifies whether the content is cropped, and if so, whether a scrolling mechanism is provided to view the cropped out content.

Syntax

overflow: visible | scroll | auto | hidden | inherit

initial value:	visible
applies to:	block-level and replaced elements
inherited:	no
computed value:	as specified

The cropped area extends to the outer edge of the padding area, but remains within the inner border of the overflowed element box.
The overflow property has no effect on elements whose width or height property has not been specified.

Overflow accepts four values that control how overflowing content should be displayed:

visible: This is the default. Overflowing content spills outside the element box and is visible.
scroll: Content is cropped to the outside edges of the padding area, and scroll bars are provided to allow viewing of the cropped content.
If the scroll option is applied, both horizontal and vertical scroll bars will be displayed whether or not the content requires it.
auto: This value is similar to the scroll parameter. Scroll bars are added to the overflow window only when needed. The implementation of the auto value is user agent dependant. For example, Firefox will provide only a horizontal scrollbar if the content overflows to the right or left of the containing block. Similarly, Firefox will only provide a vertical scrollbar if the content spills out the bottom of the containing block. Other user agents may provide both horizontal and vertical scrollbars; still others may not provide any scroll bars.
The W3C spec only recommends that scroll bars be provided if the content overflows the element, so a user agent is not bound to provide scroll bars if the auto value is specified. However, most user agents do comply with the W3C recommendation and provide scroll bars as needed.
hidden: Content is cropped to the outside edges of the padding area. The content that is cropped out and not visible are not viewable by the user.

Examples

In this example, the containing block has a fixed width of 600 pixels. In this containing block is a DIV which exceeds the width of the containing block by 100 pixels, so the DIV overflows the right edge of the containing block. Below are the style sheet and the markup for this example:

Style sheet

.elementBox {
  width: 600px;
  color: #000; background-color: #DDD;
  }
 
.wideContent {
  width: 670px;
  padding: 5px;
  margin: 10px;
  color: #000; background-color: #CFF;
  text-align: justify;
  }

Markup

<div class="elementBox ">
  <p>The containing block is 600 pixels wide.</p>
  <div class="wideContent ">
    The total width of the "wideContent"
    DIV is 700 pixels, which exceeds the width of the
    containing block.
    This causes the content to spill out the side of the
    containing block.
    ...
    Donec tempus accumsan lorem. Proin turpis risus, accumsan eu,
    tempor at, pellentesque a, risus. ....
  </div>
  <p>The containing block is 600 pixels wide.</p>
</div>

This is the rendered result.

The containing block is 600 pixels wide.

The total width of the "wideContent" DIV is 700 pixels, which exceeds the width of the containing block. This causes the content to spill out the side of the containing block. ... Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus. Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum.

The containing block is 600 pixels wide.

The overflow property is applied to the "elementBox" DIV so that the content does not spill out the side of the elementBox DIV. These links demonstrate the effect of the various values of the overflow property applied to this example:

In the next example, the containing block has a fixed height of 5 ems. The content for the containing block is too large for the content area so it spills out the bottom of the element box. In addition, there is a floating element that is higher so it overflows the bottom of the element box, as well. Below are the style sheet and the markup for this example:

Style sheet

.elementBox {
  width: 600px;
  color: #000; background-color: #DDD;
  }
 
.tallContent {
  float: right;
  width: 25%;
  padding: 1em;
  margin: 0.5em 1em 1em 1.5em;
  line-height: 1.5em;
  color: #000; background-color: #CFF;
  text-align: justify;
  }

Markup

<div id="exampleTall">
  <div class="elementBox ">
    <span class="tallContent">
      This text is floating within the paragraph. As you can
      see, the length of the text causes it to overflow the
      containing block.
      ...
      Fusce et ipsum.  Nullam vel sapien nec pede luctus
      fermentum. Ut feugiat, leo non mattis gravida, ...
    </span>
    This element has a <code>height</code> of <code>5em</code>.
    There is too much text for the content area of this element,
    so the content overflows the bottom of the element box.
    ...
    Fusce et ipsum.  Nullam vel sapien nec pede luctus ...
  </div>
</div>

This is the rendered result.

This text is floating within the paragraph. As you can see, the length of the text causes it to overflow the containing block. ... Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. This element has a height of 5em. There is too much text for the content area of this element, so the content overflows the bottom of the element box. ... Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus. Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum.

The overflow property is applied to the elementBox DIV so that the content does not spill out the bottom of the elementBox DIV. These links demonstrate the effect of the various values of the overflow property applied to this example:

Resources

Simulate HTML frames using the overflow property. CSS Play, Stu Nichols.
There are links at the left to a handful of additional examples.
Overflow , CSS: The Definitive Guide, 1st Edition, Eric Meyer
Overflow , W3C CSS 2.1 Specification

Manipulating Visibility