overflow
What to do with content that does not fit into the element.
Syntax
overflow: value;Values
| Parameter | Type | Description |
|---|---|---|
| visible | keyword | It sticks out (the default). |
| hidden | keyword | It is clipped; it can still be scrolled with code. |
| auto | keyword | A scrollbar appears when needed. |
| scroll | keyword | Scrollbars are always shown. |
| clip | keyword | Clipped with no possibility to scroll. |
Examples
Different behavior for overflowing text:
<style>
div { width: 160px; height: 50px; border: 1px solid gray; margin-bottom: 30px; }
</style>
<div style="overflow: visible;">visible: the text sticks out of the block and overlaps what is below.</div>
<div style="overflow: hidden;">hidden: the extra text is cut off and cannot be seen.</div>
<div style="overflow: auto;">auto: a scrollbar appears only when the text does not fit.</div>Horizontal scrolling only — overflow-x:
<div style="overflow-x: auto; white-space: nowrap; width: 220px; border: 1px solid gray;">
<img src="/media/photo-200x200.jpg" alt="" width="100">
<img src="/media/photo-200x200.jpg" alt="" width="100">
<img src="/media/photo-200x200.jpg" alt="" width="100">
</div>Notes
overflow other than visible breaks position: sticky for children. When a whole page scrolls horizontally, look for an element wider than the screen rather than hiding it with overflow-x: hidden on body.
See also
- text-overflow — How text that does not fit is cut: abruptly or with an ellipsis.
- max-height — The maximum height: the element grows with its content only up to this limit.
- overflow-wrap — Allows a long word to break so that it does not stick out of its block.
Related recipes
- How to crop an image
- How to hide an element visually but keep it for screen readers
- How to keep a table header fixed while scrolling
- How to make a carousel with scroll-snap
- How to make a responsive navigation
- How to make a table responsive with scrolling
- How to make rounded corners
- How to prevent page scrolling under a modal dialog
- How to prevent text wrapping
- How to scale an element on hover
- How to truncate text with an ellipsis
In the tutorial
- Overflow and layers — What to do when content does not fit into a block — overflow, scrolling, an ellipsis — and how z-index decides which element lies on top.