CSS Overflow
In this page:
selector {
overflow: visible | hidden | scroll | auto;
overflow-x: value;
overflow-y: value;
}Default Visible Overflow
By default, browsers treat overflow as visible. If content exceeds its parent container's dimensions, it simply spills out and renders on top of adjacent elements. This prevents your content from being hidden silently.
- Use the default visible setting when you want decorative background shapes to spill outside their cards.
- Accepted values:
- visible — content spills out (default)
- hidden — clips overflowing content
- scroll — always shows scrollbars
- auto — scrollbars only when needed
- clip — clips without any scrolling
- overflow-x | overflow-y — control each axis separately
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Default Visible Overflow
<style>
.box {
width: 100px;
height: 50px;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">This text is long enough to spill outside the box's boundaries</div>Clipping with Hidden Overflow
Setting overflow to hidden instructs the browser to clip any content that exceeds the container's boundaries, making the excess content completely invisible without adding any scrollbars.
- Use overflow: hidden to clip nested elements to match your card's rounded corners.
- Accepted values:
- visible — content spills out (initial value)
- hidden — clipped, no scrollbars
- scroll — clipped, scrollbars always shown
- auto — scrollbars only when needed
- clip — clipped with no scrolling at all
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Clipping with Hidden Overflow
<style>
.box {
width: 100px;
height: 50px;
overflow: hidden;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">This text is long enough that the excess gets clipped away</div>Scrolling with Scroll and Auto
Setting overflow to scroll forces the browser to add scrollbars to the container. Setting overflow to auto is more efficient, as it tells the browser to add scrollbars automatically only when the content is actually too large to fit.
- Always prefer overflow: auto over scroll to prevent empty, unclickable scrollbars from cluttering your layout when content is small.
- Accepted values:
- visible — content spills out (initial value)
- hidden — clipped, no scrollbars
- scroll — clipped, scrollbars always shown
- auto — scrollbars only when needed
- clip — clipped with no scrolling at all
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Scrolling with Scroll and Auto
<style>
.box {
width: 150px;
height: 60px;
overflow: auto;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">
<p>Scrollbar appears because this content is actually too tall to fit inside the box.</p>
<p>Keep scrolling to see the rest of this line.</p>
<p>Still more content below.</p>
</div>Text Truncation with Ellipsis
For single-line text overflows, you can combine the text-overflow and overflow properties to append a clean ellipsis (...) automatically, keeping your card layouts looking tidy.
- Always pair text-overflow: ellipsis with white-space: nowrap and overflow: hidden to trigger truncation.
- Accepted values:
- clip — cuts the text off (initial value)
- ellipsis — shows … where the text is cut
- string — a custom string (limited support)
- requires overflow other than visible
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Text Truncation with Ellipsis
<style>
.truncate {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: lightyellow;
border: 1px solid #cc9900;
padding: 4px;
}
</style>
<div class="truncate">This single line of text is too long to fit and gets truncated</div>Containing Floats with Overflow
A classic CSS layout trick is using overflow: auto or overflow: hidden on parent elements to contain floated children. This establishes a new Block Formatting Context (BFC), forcing the parent container to expand and wrap around its floated children.
Example: Containing Floats with Overflow
<style>
.parent {
overflow: auto;
background: #eee;
border: 1px solid #999;
}
.child {
float: left;
width: 100px;
height: 100px;
background: steelblue;
color: white;
}
</style>
<div class="parent">
<div class="child">Floated</div>
</div>- Allowing text to spill out and cover adjacent content blocks by neglecting overflow settings.
- Hiding overflow (overflow: hidden) on containers with important text or actions, making them unreachable.
- Forgetting to combine white-space: nowrap and overflow: hidden when attempting to use text-overflow: ellipsis.
- The overflow property controls how browsers handle content that exceeds its container's fixed dimensions.
- Use overflow: hidden to clip excess content cleanly, and overflow: auto to add scrollbars automatically only when needed.
- Control horizontal and vertical overflow separately using overflow-x and overflow-y properties.
The overflow properties, including horizontal and vertical splits, are supported natively by all web browsers.
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: