When content overflows its block-level container, the CSS Overflow is used to specify the way to handle it. CSS can control the size, positioning, and behavior of each element in HTML.
CSS Overflow property values:
| Value | Uses |
| visible | Used to indicate that the overflow is not clipped. |
| hidden | Used to indicate that the overflow is clipped. Thus the rest of the content will be invisible. |
| scroll | Used to indicate that the overflow is clipped. Thus to see the rest of the content, a scroll bar is used. |
| auto | Used to indicate that in case the overflow is clipped, then to see the rest of the content, a scroll bar will be used. |
| inherit | Used to inherit the property from its parent element. |
| initial | Used to set the property to its initial value. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: wheat;
width: 300px;
height: 50px;
border: 2px solid brown;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</div>
</body>
</html>
Explanation:
In the above example, CSS Overflow is used to specify the way to handle content overflow.