CSS overflow property decides how to display content if it goes beyond the boundaries of a block (e.g. when inside div).
CSS property overflow
| CSS version: | CSS 2.1 |
| Value: | visible | hidden | scroll | auto | inherit |
| Initial: | visible |
| Applies to: | block containers |
| Inherited: | no |
overflow values
| visible | Default. content is visible. |
| hidden | Content is hidden/clipped. |
| scroll | Content is clipped but scrollable. Scroll bar appears even when not clipped. Note that on Mac depending upon General show scroll settings (if auto), this appears similar to scroll:auto |
| auto | scrollable whenever content is clipped. When not clipped, scroll bar would not appear. |
| inherit | inherit from parent |
Example – overflow:visible
Here content text from first div is overflowing outside div and is visible. Note that overflow:visible is default value so it is not added to style.
<style type="text/css">
.box1 {
width: 100px;
height: 40px;
background-color:lightgreen;
}
.box2 {
width: 100px; height:100px;
background-color:lightgray;
}
</style>
<div class="box1">
This is some text which can oveflow and overlap with other elements.
</div>
<div class="box2">
</div>Example – overflow:hidden
Here overflowing content text from div is hidden/clipped.
<style type="text/css">
.box1 {
width: 100px;
height: 60px;
background-color:lightgreen;
overflow:hidden;
}
</style>
<div class="box1">
hidden example - this is some text which will get clipped.
</div>Example – overflow:scroll
Here overflowing content text from div is hidden/clipped and is scrollable.
<style type="text/css">
.box1 {
background-color:lightgreen;
width: 200px; height: 50px;
overflow:scroll;
}
.box2 {
background-color:lightgreen;
width: 300px; height: 60px;
overflow:scroll;
}
</style>
<div class="box1">
scroll - this is some text which will get clipped and scroll will appear.
</div>
<br/>
<div class="box2">
scroll - this is some text which will not get clipped but scroll will still appear.
</div>Example – overflow:auto
Here overflowing content text from div is hidden/clipped and is scrollable when text get clipped. Note that as per CSS overflow spec this behaviour is browser dependent.
<style type="text/css">
.box1 {
background-color:lightgreen;
width: 200px; height: 50px;
overflow:auto;
}
.box2 {
background-color:lightgreen;
width: 300px; height: 60px;
overflow:auto;
}
</style>
<div class="box1">
auto - this is some text which will get clipped and scroll will appear.
</div>
<br/>
<div class="box2">
auto - this is some text which will not get clipped but scroll will also not appear.
</div>Related
- CSS white-space - collaping and wrapping of whitespaces and newlines
- CSS text-overflow - truncate text with three dots
- HTML pre tag tutorial
- CSS clip
