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

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]