overflow-x property

Sets or retrieves how to manage the content of the object when the content exceeds the width of the object.

Internet Explorer 9

 

Syntax

overflow-x: visible | scroll | hidden | auto

Property values

visible

Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.

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

There are no standards that apply here.

Remarks

Windows Internet Explorer 8. The -ms-overflow-x attribute is an extension to CSS, and can be used as a synonym for overflow-x in IE8 Standards mode.

With Microsoft Internet Explorer 6 and later, when you use the !DOCTYPE declaration to specify standards-compliant mode, this property applies to the html object.

Examples

This example shows two div elements that each contain text. In the first div element, the overflow-x property is set to visible. In the second div element, the overflow-x property is set to auto.


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


<body>
  <div class="of_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="of_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 images show the result. In the first div element, content is not clipped and scroll bars are not added:

An image showing the overflow-x property set to visible.

In the second div element, content is clipped and a vertical scroll bar is added:

An image showing the overflow-x property set to auto.

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Reference
overflow
overflow-y
position

 

 

Show:
© 2014 Microsoft