CSS overflow property is used to manage the content that too big or not fit to specific area. CSS Overflow
The overflow property has the following values:
visible - It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
hidden - It specifies that the overflow is clipped, and rest of the content will be invisible.
scroll - It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
auto - It is similar to scroll but it add scroll when it needed.
inherit - It inherits the property from its parent element.
initial- It is used to set the property to its initial value.
It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: palegreen;
color:black;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Overflow Visible</h2>
<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
</div>
</body>
</html>
It specifies that the overflow is clipped, and rest of the content will be invisible.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: palegreen;
color:black;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow Hidden</h2>
<P>It specifies that the overflow is clipped, and rest of the content will be invisible.</p>
<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>
</body>
</html>
It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: palegreen;
color:black;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: Scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow Scroll</h2>
<P>It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.</p>
<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>
</body>
</html>
It is similar to scroll but it added scroll when it needed.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: palegreen;
color:black;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: auto;
}
</style>
</head>
<body>
<h2>CSS Overflow Auto</h2>
<P>It is similar to scroll but it added scroll when it needed.</p>
<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>
</body>
</html>
