Full Stack Web Development Courses with Real-time projects Start Now!!
In this article, we will learn about Overflow property of CSS. Let’s start!!!
What is CSS Overflow?
When the content of an element is too large to fit in the specified area, the overflow property specifies whether to clip it or add scrollbars. It allows us to control what happens when the content of an element is too large to fit into a given area. When this occurs, the content “overflows” into another area, either horizontally (X-axis) or vertically (Y-axis) (Y-axis).
The following values are assigned to the overflow property:
- visible
- hidden
- scroll
- auto
- clip
- ellipsis
- overflow-x and overflow-y
- shorthand
- wrap
Let us see each of them in detail below.
CSS OverFlow Values
1. CSS Overflow visible
If no value is specified, this is the default value for the overflow property.
<html>
<head>
<style>
div {
background-color: #e3d3d3;
width: 200px;
height: 130px;
color: #7700ff;
border: 2px solid;
overflow: visible;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
Because the text cannot fit into the Lavender container, it overflows and crosses the border. It would be even more annoying in a real-world project because the text would overlap with other elements on the page.
2. CSS Overflow hidden
The overflow is clipped, and the rest of the content is hidden using the hidden value:
To prevent overflow from rendering outside the element’s box, set the overflow property to hidden. It will clip the content at the box’s padding edge. Furthermore, scrolling prevents the user from seeing content beyond the padding edge.
<html>
<head>
<style>
div {
background-color: #e3d3d3;
width: 200px;
height: 130px;
color: #7700ff;
border: 2px solid;
overflow: hidden;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
It solves the issue of content being in an area where it should not be, but it does not provide a way to access the cut-off content.
3. CSS Overflow scroll
So we already know that the hidden value removes and conceals the text. However, the scroll value also cuts the text and displays a scrollbar, allowing us to scroll and see the portion of the text that was cut off.
<html>
<head>
<style>
div {
background-color: #e3d3d3;
width: 200px;
height: 130px;
color: #7700ff;
border: 2px solid;
overflow: scroll;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
Both axes now have scrollbars. We don’t need the horizontal scrollbar because there is no content overflowing in that direction.
4. CSS Overflow auto
The auto value is similar to scroll, but it only adds scrollbars when they are required:
<html>
<head>
<style>
div {
background-color: #e3d3d3;
width: 200px;
height: 130px;
color: #7700ff;
border: 2px solid;
overflow: auto;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
The auto value improves the usability of a resource as it excludes unpleasant subway barres when it is not needed. This discourages the appearance of scrollbars when the content does not require the extra space of the container it is placed in. Further, the utilization of auto is useful in rendering the elements of a web page for adequate responses where content dimension may vary due to the flow of devices or the space of a viewport.
5. CSS overflow clip
Overflow-clip appears to work similarly to hidden value in that it clips the content to fit the parent’s box and hides the overflowing content. When the CSS text-overflow property is set to “clip,” inline content that overflows its block container element is clipped at the padding edge. Visitors will be unable to see content beyond the clipped edge.
<html>
<head>
<style>
div {
background-color: #e3d3d3;
width: 200px;
height: 130px;
color: #7700ff;
border: 2px solid;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
6. CSS overflow ellipsis
When you use the ellipsis value, it will cut the inline content that overflows its block container element at the padding edge, plus a little extra to fit the ellipsis. This value also prohibits any sort of scrolling, including programmatic scrolling, indicating to the browser that the element’s box is not a scroll container. Visitors will be unable to see content beyond the clipped edge.
<html>
<head>
<style>
div {
background-color: #e3d3d3;
height: 130px;
color: #7700ff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 250px;
border: 1px solid;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
7. CSS overflow-x and overflow-y properties
The overflow-x and overflow-y properties specify whether content overflow should be changed only horizontally or vertically (or both). It holds for the horizontal and vertical axes. If you’d rather check for overflow separately, you can do so with these:
- overflow-x specifies what happens when horizontal content overflows (from left to right).
- overflow-y specifies what happens when vertical content overflows (from top to bottom).
overflow-x: hidden; /* For Removes horizontal scrollbar */ overflow-y: scroll; /* For Adding vertical scrollbar */
The same values can also be used here: visible, hidden, scroll, and auto.
<html>
<head>
<style>
div {
background-color: #e3d3d3;
width: 200px;
height: 130px;
color: #7700ff;
border: 2px solid;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
8. CSS Overflow shorthand
Instead of defining both the overflow-x and overflow-y properties, you can use the shorthand overflow property. If two values are specified, the first represents overflow-x and the second represents overflow-y.
<html>
<head>
<style>
div {
background-color: #e3d3d3;
width: 200px;
height: 130px;
color: #7700ff;
border: 2px solid;
overflow: hidden scroll;
}
</style>
</head>
<body>
<div>DataFlair:CSS Overflow -
This is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.
</div>
</body>
</html>
Output
If only one value is specified, it applies to both the overflow-x and overflow-y properties. For example, if I used overflow: scroll to define the div containing the Text, the Text could be scrolled horizontally and vertically.
9. CSS Overflow wrap
Overflow-wrap property instructs the browser that if a line of text exceeds the container’s width, it may be split into multiple lines. Like the overflow property, it has a set of values that it uses to break texts.
Overflow-wrap has three possible values: normal, anywhere, and break-word.
a. normal: This is the overflow-wrap property’s default value; it will not break text when it overflows its container; instead, the text will break at normal word break points.
b. break-word: If the text overflows the container, this value will split it into multiple lines at acceptable break points.
c. anywhere: This value is similar to the break-word value, but anywhere allows long lines of text to be broken at any point (even in the middle of a word) if it can’t be broken at an otherwise acceptable point.
Conclusion
This DataFlair tutorial taught us how to control the overflow of content on our pages using CSS. We examined the various values that can be assigned to the overflow property and the results that these values produce. Finally, we learned how to use the overflow property values only in the horizontal or vertical direction.
