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.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋