Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

overflow property

Sets or retrieves a value indicating how to manage the content of the object when the content exceeds the height or width of the object.

CSS 2.1, Section 11.1.1

Syntax

overflow: visible | hidden | scroll | auto

Property values

visible

Default. Content is not clipped and scroll bars are not added.

scroll

Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.

hidden

Content that exceeds the dimensions of the object is not shown.

auto

Content is clipped and scrolling is added only when necessary.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuevisible

Standards information

Remarks

The default value for the body element is auto.

Setting the overflow property to hidden on a textArea object hides its scroll bars.

Setting the overflow property to visible causes the content to clip to the size of the window or frame that contains the object.

Examples

This example demonstrates the overflow behavior as a result of different overflow settings. Each div element uses a different setting.


div {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: thin;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
}
.visible {
  overflow: visible;
}
.hidden {
  overflow: hidden;
}
.scroll {
  overflow: scroll;
}
.auto {
  overflow: auto;
}


<body>
  <div class="visible">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="hidden">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="scroll">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="auto">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</body>

The following image shows the result. In the first div element, content is not clipped and scroll bars are not added. In the second div element, content that exceeds the dimensions of the object is not shown. In the third div element, content is clipped and scroll bars are added. In the fourth div element, content is clipped and scrolling is added only when necessary:

An image showing div elements with different overflow settings.

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Reference
overflow-x
overflow-y
position

 

 

Show:
© 2014 Microsoft