CSS Overflow
This property specifies how to handle the content when it overflows its block-level container.
property values:
visible – That overflow is not clipped
hidden – That the overflow is clipped(content will be invisible).
scroll – That the overflow is clipped(rest of the content).
auto – It is needed to see the rest of the content.
inherit – Property from its parent element.
initial – Set the property to its initial value.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: #00ffff;
width: 100px;
height: 100px;
overflow: scroll;
}
div.hidden {
background-color: #00FF00;
width: 100px;
height: 170px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>overflow property</h2>
<p>overflow:scroll</p>
<div class="scroll">Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.</div>
<p>overflow:hidden</p>
<div class="hidden">Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.</div>
</body>
</html>
OUTPUT:
