Overflow property

To control the overflow of the fixed box.There are four types of overflow property and they are: visible(default), hidden, scroll and auto.

visible overflow:
If you don’t set the overflow property at all the default is visible.
For eg:
.box{
overflow:visible;
height:20px;
}



hidden overflow:
The opposite of the default visible is hidden. This literally hides any content that extends beyond the box.
For eg:
.box{
overflow:hidden;
height:20px;
}

scroll
Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.
For eg:
.box{
overflow:scroll;
height:20px;
}

auto overflow:
Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them.
For eg;
.box {
overflow:auto;
height:20px;
}
Now, write a div as below and try out all four property for the box class as below:
<div>
This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.This is an example of overflow.
</div>