Summary

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

• Initial value : visible
• Applies to: block and inline-block elements, table cells
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

overflow:  visible | hidden | scroll | auto | inherit

Values

visible

Default value. Content is not clipped, it may be rendered outside the content box.

hidden

The content is clipped and no scrollbars are provided.

scroll

The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

auto

Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

Examples

p {  
     width: 12em;
     border: dotted;
     overflow: auto;   /* append scrollbars if necessary */ 
}

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
short text

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Notes

Through Gecko 1.9.2 (Firefox 3.6), the overflow property is incorrectly applied to table-group elements (<thead> , <tbody> , <tfoot>). This behavior is corrected in later versions.

Browser compatibility

[*] IE 4-6 enlarges an element with overflow:visible (default value) to fit the content in it. height/width behaves like min-height/min-width.

Specifications

• CSS 2.1 Visual effects #overflow

See also

• Related CSS properties: text-overflow , white-space , overflow-x , overflow-y , clip , display