Welcome Login

Css: overflow


overflow property specifies what happens if content overflows an element's box.

overflow values  description

visible          Default.  Overflow is not clipped. It renders outside the element's box. 	
hidden 	         Overflow is clipped, and the rest of the content will be invisible.	
scroll 	         Overflow is clipped, but a scroll-bar is added to see the rest of the content.
auto             Overflow is clipped, a scroll-bar should be added to see the rest of the content.	
inherit          Specifies that the value of the overflow property should be inherited from the parent element.

 

Eg:

<!DOCTYPE html>
<html>

<head>
    <style>
    div.scroll {
    background-color:yellow;
    width:100px;
    height:100px;
    overflow:scroll;
    }
    
    div.hidden {
    background-color:#00FF00;
    width:100px;
    height:100px;
    overflow:hidden;
    }
    </style>
</head>

<body>
    <p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
    
    <p>overflow:scroll</p>
    <div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
    
    <p>overflow:hidden</p>
    <div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>

</html>

 

 

Outputs:

css-overflow1


Created on: Thursday, November 1, 2012 by Andrew Sin