CSS OVERFLOW
Some content of a web page may be too big to fit into the area.CSS overflow property is used to handle contents which overflow its block level container.
Syntax
overflow: value;
CSS overflow values
Value | Description |
---|---|
visible | It is default value.It specifies that content is displayed outside the box and content is not clipped. |
hidden | It specifies that content that overflowed is clipped and has no scroll bar. |
scroll | It specifies that the extra content is clipped and to see those, a scroll bar is given. |
auto | It also provides a scroll bar like above property but in this scroll bar is provided only when it's necessary. |
Overflow visible
The overflow is visible by default.When the overflow value is set to visible it means the content is not clipped and extra content will be visible outside the box.
div.visible{
overflow: visible;
height: 200px;
width: 300px;
background-color: #00669949;
}
▶ Run the code
Output:
Overflow hidden
The overflow hidden property clips the content.When the overflow value is set to hidden it means the content is clipped and extra content will be hidden.
.hidden{
overflow: hidden;
height: 200px;
width: 300px;
background-color: #00669949;
}
▶ Run the code
Output:
Overflow scroll
The overflow scroll property clips the content but extra content is visible by a scroll bar which is generated.
The scroll bar can be horizontal or vertical.
.scroll{
overflow: scroll;
height: 200px;
width: 300px;
background-color: #00669949;
}
▶ Run the code
Output:
Overflow auto
If the overflow is clipped then auto property creates a scroll to make overflowed content visible.
The scroll bar created by auto can be horizontal or vertical.
.auto{
overflow: auto;
height: 200px;
width: 300px;
background-color: #00669949;
}
▶ Run the code
Output: