CSS Overflow Property

In this chapter you will learn:
About overflow property
Values of this property
Examples of this property

Overflow property is used to specify the scroll of content. This property is helpful when you want to show the content in a fixed area but the spaces of the content are more.

Values of this property-
Values Description
auto Specify that the scroll-bar should be added
visible This is the default value of overflow which is used to specify that the contents are visible.
scroll An scroll-bar is added with the content of the element
hidden This value specifies that the contents are invisible.
initial Used to specify the default value of the property
inherit Inherited from parent property

Examples of this property

Example 1. overflow:scroll;

<html>
<head>
    <title>Example of overflow property</title>
    <style type="text/css">
        div
        {
            width:150px;
            height:80px;
            background-color:Yellow;
            overflow:scroll; /* overflow property */      
        }  
 
    </style>
    </head>
<body>
<div> This is the example of overflow property in which its value is scroll so you can scroll the given content.</div>
 
</body>
</html>


Output:- Example 2. overflow:hidden;

<html>
<head>
    <title>Example of overflow property</title>
    <style type="text/css">
        div
        {
            width:150px;
            height:80px;
            background-color:Yellow;
            overflow:hidden; /* overflow property */      
        }  
 
    </style>
    </head>
<body>
<div> This is the example of overflow property in which its value is hidden so some contents are invisible</div>
</body>
</html>

Output:- example of overflow-hidden
Example 3. overflow:visible;

<html>
<head>
    <title>Example of overflow property</title>
    <style type="text/css">
        div
        {
            width:150px;
            height:80px;
            background-color:Yellow;
            overflow:visible; /* overflow property */            
        }  
 
    </style>
    </head>
<body>
<div> This is the example of overflow property in which its value is visible so all contents are visible.</div>
</body>
</html>

Output:-
example of overflow-visible
SUMMARY

In this chapter, you have learned about overflow property so now it's your responsibility to use this property in your program. If you want to continue to know some other properties of CSS then click on Next button-

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.