Introduction to CSS Overflow
The CSS Overflow property always decided what will happen if the content of the page overflow from an elements box area. This property specifies whether absolutely positioned elements content (clip content) or adding a scrollbar to the content, if at all if the content is too big to align within the specified box area. This property generally has 4 values that are frequently used in the application, they are auto, hidden, scroll, visible.
What is Overflow in CSS?
Overflow is the property in CSS (Cascading Style Sheets). Which is used to fit the content properly from overflowing when the content is too big to fit within the specified area. Overflow property has 4 values, which are used always in our application. They are
1. Scroll
It adds a scroll bar to the extra content of the element.
Code:
div
{
overflow: scroll;
}
2. Hidden
It specified a portion of the content only and the rest of the content will hidden.
Code
div
{
overflow: hidden;
}
3. Auto
This auto value is automatically giving scrollbar if content is not fit within the width.
Code:
div
{
overflow: auto;
}
4. Visible
This visible is the default value for overflow property. Which works the same as a scroll.
4.5 (7,540 ratings)
View Course
Code:
div
{
overflow: visible;
}
Examples to Implement CSS Overflow
Below are examples to implement:
1. Overflow with scroll value
HTML Code:
<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Visible Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>
CSS Code:
h1 {
color: brown;
text-align: center;
}
h2
{
color: brown;
}
.visible {
overflow: scroll;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: blue;
font-size: 18px;
}
.content
{
color: green;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: blue;
font-size: 18px;
}
Output:
2. Overflow with the hidden value
HTML Code:
<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Hidden Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>
CSS Code:
h1 {
color: red;
text-align: center;
}
h2
{
color: red;
}
.visible {
overflow: hidden;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: fuchsia;
font-size: 18px;
}
.content
{
color: green;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: fuchsia;
font-size: 18px;
}
Output:
3. Overflow with auto value
HTML Code:
<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Auto Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>
CSS Code:
h1 {
color: olive;
text-align: center;
}
h2
{
color: olive;
}
.visible {
overflow: auto;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: lime;
font-size: 18px;
}
.content
{
color: blue;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: lime;
font-size: 18px;
}
Output:
4. Overflow with visible value
HTML Code:
<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Auto Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>
CSS Code:
h1 {
color: orange;
text-align: center;
}
h2
{
color: orange;
}
.visible {
overflow: visible;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: maroon;
font-size: 18px;
}
.content
{
color: blue;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: maroon;
font-size: 18px;
}
Output:
Conclusion
This property is used to handle overflow content with hidden, auto, visible and scroll values.
Recommended Articles
This is a guide to CSS Overflow. Here we discuss an introduction, what is Overflow in CSS, and examples to implement with CSS and HTML codes. You can also go through our other related articles to learn more –
