width : 200px ;
height : 50px ;
background-color : #eee ;
overflow : visible ;
}
The overflow is still displayed
overflow: hidden
When using the hidden value, the overflow will be cut and hidden.
div {
overflow : hidden ;
}
The overflow is hidden behind the predefined size frame
overflow: scroll
When the scroll value is set, the overflow will be cut and placed in a new scroll bar.Note that there will be both horizontal and vertical scroll bars (even if you don't need it).
div {
overflow : scroll ;
}
Scroll bar to see the rest of the content
overflow: auto
The auto value is similar to scroll, only that will add a scroll bar when needed.
div {
overflow : auto ;
}
overflow-x and overflow-y
Overflow-x and overflow-y properties are used to determine whether the overflow will be displayed horizontally, vertically or both.
div {
overflow-x : hidden ; /* Hide horizontal scrollbar */
overflow-y : scroll ; /* Add vertical scrollbar */
}
Previous article: Location of elements in CSS
Lesson: Float in CSS