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
- Internet Explorer
- Firefox
- Opera
- Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
.png)