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: The content is not clipped and is visible outside the element box.
- Hidden: The overflow is clipped and the rest of the content is invisible.
- Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
- Auto: It automatically adds a scrollbar whenever it is required.
- 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: In this example, we are using overflow: visible; property.
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:
Example: In this example, we are using overflow: hidden; property.
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:
Example: In this example, we are using overflow: scroll; property.
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:
Example: In this example, we are the overflow: auto; property.
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:
Example: In this example, we are using the overflow-x and overflow-y properties.
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
Last Updated :
20 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...