×

Html & Html5

The World's best Software Development Study Portal

CSS Overflow



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:-





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:-





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:-





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:-





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