In this CSS tutorial, we will be discussing the CSS Overflow property, which is a part of Layout styling. We will also be covering all the different values associated with the overflow property, which includes visible, hidden, scroll and auto .
CSS Overflow Property
The overflow property deals with the content of the element; it decides what to do with the content if it does not fit in the element specified area. There are four major values accepted by the overflow property
| Overflow Values | Description |
| visible | It is the default value for the overflow. And if the content does not fit in the specified area, then it would leak from the element box. |
| hidden | If an element property is set to hidden, then it will only show that content which fit in its element box and the rest of the content will become invisible. |
| scroll | It creates a scrollbar next to the element box so the user can scroll the element content. |
| auto | It stands for automatic, and it follows the scroll value if the content does not fit in the element box. Else it follows the visible value. |
CSS overflow:visible
visible is the default value for the overflow property. If an element overflow property is visible, then all of the element content will be displayed on the screen even if it does not fit in the element box. Visible is not a good value for the responsive webpages, because it leads to leaking content and overlapping one content with another.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: red;
width: 300px;
height: 40px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<p>
Visible is the default value for every element if the overflow property is not
defined. The only use of overflow property to control the content visibility in its
element box. In this example, you can see that some of this paragraph content is leaking
out of its element box.
</p>
</body>
</html>
Preview
Visible is the default value for every element if the overflow property is not defined. The only use of overflow property to control the content visibility in its element box. In this example, you can see that some of this paragraph content is leaking out of its element box.
CSS overflow:hidden
The hidden value is just the opposite of visible value. Suppose an element overflow property is set to hidden. In that case, only that content will be displayed on the browser which fit in the element box area, and the rest of the content will become invisible. The property comes useful when we want to show only a part of the content.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: red;
width: 300px;
height: 40px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<p>
Hidden value makes invisible that part of content which does not fit in the element
box area.In this example, you can see that some of the paragraph text is not
displayed on the browser, because of the hidden value
</p>
</body>
</html>
Preview:
Hidden value makes invisible that part of content which does not fit in the element box area.
CSS overflow:scroll
The scroll value creates a scroll bar inside the element box, so the user can scroll the element content which does not fit in the element box area.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: red;
width: 300px;
height: 70px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<p>
Scroll value create a scroll bar with in the element box so the user can scroll the
element content if it does not fit in the element box area.
</p>
</body>
</html>
Preview:
Scroll value create a scroll bar within the element box so the user can scroll the element content if it does not fit in the element box area.
CSS overflow:auto
The auto value follows the scroll if the content does not fit in the element box; else it follows the visible value.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: red;
width: 300px;
height: 70px;
border: 1px dotted black;
overflow: auto;
}
</style>
</head>
<body>
<p>
Auto stands for automatic value, and it swap value between visible and scroll.
If the content of the element does not fit in the element box then it follow the scroll
value else it follow the visible.
</p>
</body>
</html>
Preview
Auto stands for automatic value and it swap value between visible and scroll. If the content of the element does not fit in the element box, then it follows the scroll value else it follows the visible.
Summary
- Overflow property comes under the CSS layout styling.
- Overflow deals with content visibility within the element box.
- It accepts four values, visible, hidden, scroll and
- visible is the default value for every element.
- hidden value makes the element content invisible, which does not fit in the element box.
- scroll create a scrollbar within the element box.
- auto value toggle between scroll and visible.
People are also reading:
Leave a Comment on this Post