overflow-x

overflow-x

CSS overflow-x Property

The CSS overflow-x property is used to specify how content inside of an element should be clipped along the X axis, which is the horizontal plane. If you set the width of an element, and the width of the content inside of that element happens to exceed the width of its parent, use overflow-x to handle how the overflowing content is treated.

CSS CODE EXAMPLE

<style type="text/css">
div#myDiv {
    width: 120px;
    overflow-x: auto;
    height: 50px;
    padding: 10px;
}
</style>
<div id="myDiv">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Possible Values:

auto
This setting will make a scroll bar appear only if the content requires it.
scroll
This setting will make a scroll bar appear.
visible
This setting will make no scroll bar and will not hide the overflow content.
hidden
This setting will make no scroll bar and it will hide the overflow content.

Related Material

overflow-y
overflow

click here to code. 

Tweet