CSS Overflow

The CSS Overflow property defines how to handle the content when it overflows or to add scrollbars when the content is not fit in the specified area. By using the overflow property you can control the overflow content via CSS.

CSS Overflow property values

Value	Description
Scroll	It defines to see the overflow content using a scroll scrollbar property.
Auto	It specifies that if overflow is clipped, only when necessary it adds scrollbars.
Inherit	From its parent element it inherits the property.
Visible	This is a default value. The content is renders outside the element box and it specifies that overflow is not clipped.
hidden	When overflows happens rest of the content will be invisible and it specifies that overflow is clipped.

Overflow visible

The content is renders outside the element box and it specifies that overflow is not clipped.

Let's take an Example of overflow visible:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.scroll {  
    background-color: #e3f8ff;  
    width: 130px;  
    height: 100px;  
    overflow: scroll;  
}  
  </style>  
</head>  
<body>   
<p>overflow:scroll</p>  
<div class="scroll">to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar, </div>  
</body>  
</html>

Output:

overflow:scroll

to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar,

Overflow :hidden

When overflows happens rest of the content will be invisible and it specifies that overflow is clipped.

Let's take an Example of overflow hidden:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.hidden {  
    background-color: #e3f8ff;  
    width: 130px;  
    height: 100px;  
    overflow: hidden;  
}  
  </style>  
</head>  
<body>   
<p>overflow: hidden</p>  
<div class="hidden"> the content is hidden, the content is hidden the,  content is hidden ,  content is hidden  ,  content is hidden  ,  content is hidden </div>  
</body>  
</html>

Output:

overflow: hidden

the content is hidden, the content is hidden the, content is hidden , content is hidden , content is hidden , content is hidden

Overflow :Auto

It specifies that if overflow is clipped, only when necessary it adds scrollbars.

Let's take an Example of overflow auto:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.auto {  
    background-color: #e3f8ff;  
    width: 130px;  
    height: 100px;  
    overflow: auto;  
}  
  </style>  
</head>  
<body>   
<p>overflow:auto</p>  
<div class="auto">to see the hidden content add auto property, to see the hidden content add auto property,  to see the hidden content add auto property,  to see the hidden content add auto property,  to see the hidden content add auto property </div>  
</body>  
</html>

Output:

overflow:auto

to see the hidden content add auto property, to see the hidden content add auto property, to see the hidden content add auto property, to see the hidden content add auto property, to see the hidden content add auto property

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads