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:

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 »


Liked this post? Share it!