CSS : Overflow property

The CSS Overflow property property is used to specify how to handle the html contents, when it overflows with its block level container. With overflow property we are able to manage the overflowed content on the block containers by adding scrollbars or with clip content etc. The values of overflow property is as follows :

visible : The content is not clipped, however the content is displayed outside of the content box.
hidden : The content is clipped and overflow content is hidden.
scroll : The content is clipped and overflow content is visible on scroll bars
auto : If the overflow is clipped, then a scrollbar is needed.

Now lets see an example :
<html>
<head>
  <style>
    div {
      height: 120px;
      width: 200px;
      border: 2px solid;
    }
    .div1 {
      overflow: scroll;
    }
    .div2 {
      overflow: hidden;
    }
    .div3 {
      overflow: auto;
    }
    .div4 {
      overflow: visible;
    }
  </style>
</head>
<body>
  <h3>Overflow : scroll;</h3>
  <div class="div1">A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </div>
  <h3>Overflow : hidden;</h3>
  <div class="div2">A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </div>
  <h3>Overflow : auto;</h3>
  <div class="div3">A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </div>
  <h3>Overflow : visible;</h3>
  <div class="div4">A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </div>
</body>
</html>
Output :

Overflow : scroll
A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.

Overflow : hidden
A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.

Overflow : auto
A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.

Overflow : visible
A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.



Also note that the overflow property only works for block elements with a specified height. There are also two other variant or overflow property which are overflow-x and overflow-y, where overflow-x specifies what to do with the left/right edges of the content and overflow-y specifies what to do with the top/bottom edges of the content.

Example :
<html>
<head>
  <style>
    div {
      height: 120px;
      width: 200px;
      border: 2px solid;
      overflow-x: hidden;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div>A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </div>
</body>
</html>
Output :

A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.


Next Topic :