This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

overflow-x

Summary

The overflow-x property is a specific case of the generic overflow property. It controls how extra content exceeding the x-axis of the bounding box of an element is rendered.

Overview table

Initial value
visible
Applies to
non-replaced block-level elements and non-replaced ‘inline-block’ elements
Inherited
No
Media
visual
Computed value
as specified, except ‘visible’
Animatable
No
CSS Object Model Property
overflowX

Syntax

  • overflow-x: auto
  • overflow-x: hidden
  • overflow-x: no-content
  • overflow-x: no-display
  • overflow-x: scroll
  • overflow-x: visible

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.
no-display
When the content doesn’t fit in the content box, the whole box is removed, as if ‘display: none’ were specified.
no-content
When the content doesn’t fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified.

Examples

Using overflow-x width its values.

.hidden {
    overflow-x: hidden;
}
.scroll {
    overflow-x: scroll;
}
.auto {
    overflow-x: auto;
}
.visible {
    overflow-x: visible;
}

p {
    white-space: nowrap;
}

/* Set some default styles */
body {
    width: 20em;
    margin: 0 auto;
}

View live example

Usage

 The overflow-x CSS property specifies whether to clip content, render a scroll mechanism, or display overflow content of a block-level element, when it overflows at the left and right edges.

Notes

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

Related specifications

CSS basic box model
Editor’s Draft
CSS3 module: The box model
Working Draft
CSS basic box model
Working Draft

See also

Related Properties

Attributions