CSS Property overflow-x








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

Summary

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

Click to view the demo