overflow-x

Description

overflow-x property controls how to clip the left/right edges of the content.

ItemValue
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>

Click to view the demo

The code above generates the following result.

overflow-x




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference