You are here: Reference > CSS > properties > overflow-x

overflow-x property

Browser support:
3.510
Specifies what to do with content that exceeds the element's width.
If the width of an element is set and the contents of the element are wider than the specified area, then the overflow-x property provides you control over how the overflowed content is handled.
Note: The overflow-x property is supported in Firefox from version 3.5, and in Opera from version 10.
In earlier versions of Firefox and Opera, use the overflow property instead.
JavaScript page for this property: overflowX. You can find other example(s) there.

Possible values:

 One of the following values: 
-webkit-marquee
The contents scroll inside the element's box.
auto
Horizontal content is clipped and scroll bars are added when necessary.
hidden
Horizontal content outside the element's box is not shown.
overlay
Content is clipped and scroll bars are added when necessary.
scroll
Horizontal content is clipped when necessary, but horizontal scroll bar is always added.
visible
Default. Horizontal content is not clipped.
Default: visible.

Example HTML code 1:

This example illustrates the use of the overflow-x property:
<head>
    <style>
        .example {
            overflow-x: scroll;
            background-color: #F9F9F9;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="example">
        The overflow-x property determines what to do with the horizontal content outside the element's rendering area.
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content