CSS overflow-x

The CSS overflow-x property is used to control the overflowed content horizontally. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; padding: 10px; width: 60px;
         overflow-x: auto;}
   </style>
</head>
<body>
   
   <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At, ipsa?</div>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit. At, ipsa?

CSS overflow-x Syntax

The syntax of overflow-x property in CSS, is:

overflow-x: val;

The value of val should be any of the following:

auto - Used to wrap the overflowed content using scroll bar
scroll - Used to wrap the overflowed content using scroll bar
visibile - Used not to clip the overflowed content. Rather the overflowed content will gets displayed outside the box from left and/or right edge(s). This is the default value
hidden - Used to hide the overflowed content
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS overflow-x Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; padding: 10px; width: 40px;
         margin: 20px 0;}
      div.a{overflow-x: auto;}
      div.b{overflow-x: scroll;}
      div.c{overflow-x: visible;}
      div.d{overflow-x: hidden;}
   </style>
</head>
<body>
   
   <div class="a">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
   <div class="b">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
   <div class="c">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
   <div class="d">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

CSS Online Test

« Previous Tutorial Next Tutorial »