Sunday, 20 September 2015

CSS Overflow

CSS Overflow

The CSS overflow property specifies how to handle the content when it overflows its block level container.
We know that every single element on a page is a rectangular box and the size, positioning and behavior of these boxes are controlled via CSS.
Let's take an example: If you don't set the height of the box, it will grow as large as the content. But if you set a specific height or width of the box and the content inside cannot fit then what will happen. The CSS overflow property is used to overcome this problem. It specifies whether to clip content, render scroll bars, or just display content.

CSS Overflow property values

ValueDescription
visibleIt specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
hiddenIt specifies that the overflow is clipped, and rest of the content will be invisible.
scrollIt specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
autoIt specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
inheritIt inherits the property from its parent element.
initialIt is used to set the property to its initial value.

CSS Overflow Example

Let's see a simple CSS overflow property.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div.scroll {  
  6.     background-color: #00ffff;  
  7.     width: 100px;  
  8.     height: 100px;  
  9.     overflow: scroll;  
  10. }  
  11.   
  12. div.hidden {  
  13.     background-color: #00FF00;  
  14.     width: 100px;  
  15.     height: 170px;  
  16.     overflow: hidden;  
  17. }  
  18. </style>  
  19. </head>  
  20. <body>  
  21. <p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>  
  22. <p>overflow:scroll</p>  
  23. <div class="scroll">You can use the overflow property when you want to have better control of the layout.  
  24.  The default value is visible.</div>  
  25. <p>overflow:hidden</p>  
  26. <div class="hidden">You can use the overflow property when you want to have better control of the layout.   
  27. The default value is visible.</div>  
  28. </body>  
  29. </html>  

Output:
The overflow property specifies what to do if the content of an element exceeds the size of the element's box.
overflow:scroll
You can use the overflow property when you want to have better control of the layout. The default value is visible.
overflow:hidden
You can use the overflow property when you want to have better control of the layout. The default value 

No comments:

Post a Comment