CSS training institute in gurgaon | CSS training classes in gurgaon

It is that property by which we can specify clipping or adding scrollbars for our content if it is too big to fit in any specified area. It has the following values which are listed as follows:-

visible
hidden
scroll
auto

Let's talk one-by-one the values

visible

It is the by default property of overflow meaning that is not been clipped meaning that if content is too big to fit in any specified area than it will overflowing or coming out from that specified area.

Let's understand this by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

     background-color:blue;

      width:200px;

      height:90px;

      border:2px solid black;

      overflow:visible;

}

</style>

</head>

<body>

<div>

<p> It is an example of the visible value of overflow property.

And we can see our text is coming out of our specified area.

</p>

</div>

</body>

</html>

Output of the Program

It is an example of the visible value of overflow property. And we can see our text is coming out of our specified area.

We can see our text is coming out of our specified area.

hidden

It is is been clipped meaning that if content is too big to fit in any specified area than it will simply hide the text which is coming out from that specified area.

Let's understand this by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

      background-color:blue;

      width:200px;

      height:90px;

      border:2px solid black;

      overflow:hidden;

}

</style>

</head>

<body>

<div>

<p> It is an example of the hidden value of overflow property.

And we can see our text is hidden which is out of our specified area.

</p>

</div>

</body>

</html>

Output of the Program

It is an example of hidden value in overflow property. And we can see our text is hidden which is out of our specified area.

We can see the text coming out of border is vanished.

scroll

It is is also clipped and a scrollbar is added too inside the box. But this scrollbar will be adding from both horizontally and vertically.

Let's understand this by the following program:-

<!DOCTYPE htm>

<html>

<head>

<style>

div {

      background-color:blue;

      width:200px;

      height:90px;

      border:2px solid black;

      overflow:scroll;

}

</style>

</head>

<body>

<div>

<p> It is an example of the scroll value of overflow property.

And we can see scrollbar is added in our specified area.

</p>

</div>

</body>

</html>

Output of the Program

It is an example of scroll value in overflow property. And we can see scrollbar is added in our specified area.

We can see the text coming out of border is vanished.

auto

Another value of overflow property in which

Let's understand this by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

      background-color:blue;

      width:200px;

      height:90px;

      border:2px solid black;

      overflow:auto;

}

</style>

</head>

<body>

<div>

<p> It is an example of the auto value of overflow property.

And we can see scrollbar if it is needed in our specified area.

Otherwise there is no scrollbar there until the case if it is

not needed.

</p>

</div>

</body>

</html>

Output of the Program

It is an example of the auto value of overflow property. And we can see scrollbar if it is needed in our specified area. Otherwise there is no scrollbar there until the case if it is not needed.

Here scrollbars only comes when it is important or necessary.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute