This property describes what happens when content overflows an element's box.
In certain cases, a box may overflow and its content may goes partly or entirely outside the box.
CSS Syntax
overflow: visible|hidden|scroll|auto|initial|inherit;
Property Values
1)visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
2)hidden
This value indicates that the content is clipped and no scrolling user interface is available to view the content outside the clipping region.
3)scroll
This value indicates that the content is clipped and that the user can use a scrolling technique which is visible on the screen.
4)auto
If overflow is clipped, a scroll-bar is added to see the rest of the content
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: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>
0 Comment(s)