overflow-x
Description
overflow-x property controls
how to clip the left/right edges of the content.
| Item | Value |
|---|---|
| Initial value | visible |
| Inherited | No. |
| Version | CSS3 |
| JavaScript syntax | object.style.overflowX="scroll" |
Syntax and Property Values
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
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 |
Example
<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><!-- w ww. java 2 s . c o m-->
<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>
The code above generates the following result.
