CSS | Overflow
The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars. The overflow contains the following property:
- visible
- hidden
- scroll
- auto
Visible: The content is not clipped and visible outside the element box.
Example:
html
<!DOCTYPE> < html > < head > < style > p { width:100px; height:80px; border:1px solid; overflow:visible; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </ p > </ body > </ html > |
Output:
Hidden: The overflow is clipped and the rest of the content is invisible.
Example:
html
<!DOCTYPE> < html > < head > < style > p { width:100px; height:80px; border:1px solid; overflow:hidden; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </ p > </ body > </ html > |
Output:
Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
Example:
html
<!DOCTYPE> < html > < head > < style > p { width:120px; height:100px; border:1px solid; overflow:scroll; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </ p > </ body > </ html > |
Output:
Auto: It automatically adds a scrollbar whenever it is required.
Example:
html
<!DOCTYPE> < html > < head > < style > p { width:120px; height:100px; border:1px solid; overflow:auto; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </ p > </ body > </ html > |
Output:
Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.
Example:
html
<!DOCTYPE> < html > < head > < style > p { width:120px; height:100px; border:1px solid; overflow-x:scroll; overflow-y:hidden; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </ p > </ body > </ html > |
Output:
Supported Browser:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 7
- Safari 1
Please Login to comment...