The CSS overflow property specifies what to do in the case a content is too large to fit in the container box. It specifies if a scrollbar should appear, or if a content gets clipped.
The overflow property is a shorthand for overflow-x and overflow-y. The overflow-x property specifies handling the overflow in the horizontal direction, while overflow-y specifies handling the overflow in the vertical direction.
When learning about this, it is useful to know a little something more about positioning.
Values
The overflow property can have different values:
- visible - content can be rendered outside of the box,
- hidden - content gets clipped and no scrollbars are shown,
- scroll - content gets clipped and necessary scrollbars are shown,
- auto - the browser determines how it will handle the content, it can vary from browser to browser, but generally, scrollbars appear as required.
The overflow property applies only to the block, inline-block and table elements.
Syntax
The following syntax is used for defining the overflow property:
div {
overflow: hidden;
}
Examples
Now, let’s back this theory up with some examples. When working with text, it should have a proper formatting.
HTML
<div>
<p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow: visible;
}
In the example above, I have set the overflow to visible and the content spills outside of the containing box.
HTML
<div>
<p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow: hidden;
}
In the second example, I have set the overflow property to hidden. The content is clipped and no scrollbars are visible.
HTML
<div>
<p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow: scroll;
}
In the third example, I have set the overflow property to scroll. In this case, the content spills outside the container, and the scrollbars appear.
HTML
<div>
<p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow-y: scroll;
overflow-x: hidden;
}
Finally, you can see the usage of the overflow-y property. You see only the vertical scrollbar is visible, while the horizontal scrollbar is hidden.
Summary
In this short tutorial, I have explained the overflow property. Hopefully, it will be of any help when you start your next project.
Thank you for reading!
This article is originally published on Kolosek Blog.
Top comments (4)
Nice one! I would like to add a combo which I use regularly:
This will show as much text as possible ending with three dots:
'...'.Thanks for sharing! :)
Best Explanation Ever. I understand right away