CODESCRACKER

CSS overflow

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

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; color: white;
         padding: 10px; width: 180px; height: 80px;
         overflow: auto;}
   </style>
</head>
<body>
   
   <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere, tenetur 
      delectus rem suscipit pariatur quidem voluptate id. Eaque, deserunt aliquam.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit,
      amet consectetur adipisicing elit. Ipsam sit voluptates dolore cum, deserunt
      laudantium architecto in eos?
   </div>
   
</body>
</html>
Output
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere, tenetur delectus rem suscipit pariatur quidem voluptate id. Eaque, deserunt aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam sit voluptates dolore cum, deserunt laudantium architecto in eos?

Note - The overflow property only works for block elements with height property specified to it.

CSS overflow Syntax

The syntax of overflow property in CSS, is:

overflow: x;

The value of x should be any of the following:

CSS overflow Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; padding: 10px;
         height: 66px; margin: 20px 0;}
      div.a{overflow: auto;}
      div.b{overflow: scroll;}
      div.c{overflow: visible;}
      div.d{overflow: hidden;}
   </style>
</head>
<body>
   
   <div>
      <h2>Without overflow</h2>
      <p>This is an example of overflow property</p>
   </div>
   <div class="a">
      <h2>overflow: auto</h2>
      <p>This is an example of overflow: auto</p>
   </div>
   <div class="b">
      <h2>overflow: scroll</h2>
      <p>This is an example of overflow: scroll</p>
   </div>
   <div class="c">
      <h2>overflow: visible</h2>
      <p>This is an example of overflow: visible</p>
   </div>
   <div class="d">
      <h2>overflow: hidden</h2>
      <p>This is an example of overflow: hidden</p>
   </div>
   
</body>
</html>
Output

Without overflow

This is an example of overflow property

overflow: auto

This is an example of overflow: auto

overflow: scroll

This is an example of overflow: scroll

overflow: visible

This is an example of overflow: visible

overflow: hidden

This is an example of overflow: hidden

Here are the list of two properties that can be used to control overflowed content horizontally and/or vertically:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!