CSS Property overflow-x
overflow-x property controls
how to clip the left/right edges of the content.
Summary
| Item | Value |
|---|---|
| Initial value | visible |
| Inherited | No. |
| Version | CSS3 |
| JavaScript syntax | object.style.overflowX="scroll" |
CSS Syntax
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| visible | do not clip the content |
| hidden | clip the content, and no scrolling |
| scroll | clip the content and scrolling is provided |
| auto | provide a scrolling for overflowing content |
| no-display | remove if the content cannot fit in the content box |
| no-content | hide if the content cannot fit in the content box |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
overflow-x |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use overflow-x CSS property.
<html>
<body>
<div style="overflow-x:auto;
background-color:#ccccff;
width:200;
height:50">
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
</div><!-- ww w . j a v a 2 s .c om-->
<div style="overflow-x:scroll;
background-color:#ffffcc;
width:200;
height:50">
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
</div>
</body>
</html>