The "Overflow" is the CSS property that we will understand in this article.
The CSS overflow property specifies how to handle the content when it overflows its block level container.
Each component within a webpage is represented as a rectangular container, with CSS governing the dimensions, placement, and functionality of these containers.
For instance, when the box's height is not defined, it expands to accommodate the content. However, specifying a fixed height or width may result in the content not fitting within the container. In such cases, the CSS overflow property comes into play, allowing you to decide whether to clip the content, show a scroll bar, or adjust the content display.
CSS Overflow Property Values
There exist different options for the CSS overflow property values. The following table outlines these values:
| Value | Description |
|---|---|
| visible | It specifies that overflow is not clipped and renders the element outside its box. It is the default value of the CSS overflow property. |
| hidden | It specifies that the overflow is clipped, and rest of the content will be invisible. |
| scroll | It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content. |
Clip |
It specifies that if overflow is clipped, then the rest of the content will be clipped. |
auto |
It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content. |
| inherit | It inherits the property from its parent element. |
| initial | It is used to set the property to its initial value. |
Illustrations of the CSS Overflow Property
We will understand the CSS overflow attribute through visual aids.
Illustration 1:
- We will be utilizing the overflow CSS property on the <p> element in this illustration.
- We will specify the value of the CSS overflow property to be "visible" .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Illustration of the CSS overflow property with "visible" value</title>
<style>
p {
background-color: plum;
width: 125px;
height: 55px;
border: 1px solid black;
overflow: visible;
}
</style>
</head>
<body>
<h2>Use of the CSS overflow property when the value is set to "visible"</h2>
<h3>overflow: visible</h3>
<p>We have utilized the CSS overflow property with a "visible" value. Even if the content overflows the boundary of the container, then the content will still be visible outside the boundary of the container.</p>
</body>
</html>
Output:
Here is the displayed outcome that shows the content within the <p> element exceeds its boundaries. This occurs due to defining the overflow CSS attribute as "visible," allowing the content to protrude beyond the container.
Illustration 2:
We'll apply the CSS overflow property to the <div> element in this example, setting the CSS overflow property value to "hidden".
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo of the CSS overflow property with the value "hidden"</title>
<style>
div {
background-color: peru;
width: 125px;
height: 55px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Utilization of the CSS overflow property when the value is specified to "hidden"</h2>
<h3>overflow: hidden</h3>
<div>We have utilized the CSS overflow property and allotted it a value "hidden".</div>
</body>
</html>
Output:
Here, in the result, we can observe that the text enclosed within the <div> tag becomes concealed if it exceeds the limits of a container.
Illustration 3:
- We will utilize the CSS overflow property on the <div> element in this illustration.
- We will be putting the value of the CSS overflow property to "scroll" .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstration of the CSS overflow property with "scroll" value </title>
<style>
div {
background-color: khaki;
width: 125px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Utilization of the CSS overflow property when the value is set to "scroll"</h2>
<h3>overflow: scroll</h3>
<div>We have made the utilization of the CSS overflow property and allotted it a value that is "scroll".</div>
</body>
</html>
Output:
Here is the result that demonstrates when the content within the <div> element exceeds the available space, both vertical and horizontal scroll bars appear for the user to navigate and view the complete text.
Illustration 4:
- We will make the utilization of the CSS overflow property on <p> elements in this illustration.
- We will be putting the value of the CSS overflow property to "auto" .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo of the CSS overflow property with "auto" value</title>
<style>
.paragraph-1 {
background-color: lightcoral;
width: 125px;
height: 55px;
border: 1px solid black;
overflow: auto;
}
.paragraph-2 {
background-color: lightcoral;
width: 200px;
height: 82px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<h2>Utilization of the CSS overflow property when the value is set to "auto"</h2>
<h3>overflow: auto</h3>
<p class="paragraph-1">We have specified the width to 125px and utilized the CSS overflow property by giving it a value of "auto".</p>
<p class="paragraph-2">We have defined the width to 150px and utilized the CSS overflow property by assigning it a value to "auto".</p>
</body>
</html>
Output:
Here is the result where we observe that if the width of paragraph-1 is adjusted to 125px, and the text within paragraph-1 exceeds this width, a vertical scroll bar will appear. However, when paragraph-2 is resized to 150px, the content inside it will be contained without overflowing.
Illustration 5:
- We will utilize the CSS overflow property on the <p> element in this illustration.
- We will set the value of the CSS overflow property to "clip" .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration of CSS overflow property with "clip" value</title>
<style>
p {
background-color: orange;
width: 150px;
height: 55px;
border: 1px solid black;
overflow: clip;
}
</style>
</head>
<body>
<h2>Utilization of the CSS overflow property when the value is set to "clip"</h2>
<h3>overflow: clip</h3>
<p>We have utilized the CSS overflow property and assigned it the value "clip".</p>
</body>
</html>
Output:
Here is the outcome where we observe that if the information within the <p> element surpasses the boundaries of the container, it will be truncated.
Illustration 6:
- We are going to utilize the CSS overflow property on the HTML elements in this illustration.
- We will specify the value of the CSS overflow property to "initial" and "inherit" .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Illustration of CSS overflow property with "initial" and "inherit" value</title>
<style>
.p1 {
background-color: honeydew;
width: 125px;
height: 55px;
border: 1px solid black;
overflow: initial;
}
.p2 {
background-color: orange;
width: 150px;
height: 55px;
border: 1px solid black;
overflow: inherit;
}
</style>
</head>
<body>
<h2>Use of the CSS overflow property when the value is set to "initial" and "inherit"</h2>
<h3>overflow: initial</h3>
<p class="p1">We have utilized the CSS overflow property and provided it with the value "initial".</p> <br>
<h3>overflow: inherit</h3>
<p class="p2">We have utilized the CSS overflow property and provided it with the value "inherit".</p>
</body>
</html>
Output:
Here is the result that demonstrates how overflowing text in the initial and subsequent paragraphs leads to the excess content being displayed.
Browser Compatibility
Following are the browsers that support the CSS overflow property:
- Google Chrome
- Safari
- Opera
- Firefox
- Microsoft Edge
Conclusion
We have explored the CSS overflow property in this guide. We have learned that the CSS overflow property offers a range of options including visible, hidden, scroll, auto, clip, initial, and inherit. These options are useful for managing content that exceeds the container's boundaries.