CSS Overflow

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.