overflow
The overflow property controls what happens when content exceeds its element's box.
Syntax
overflow: visible | hidden | clip | scroll | auto;
Examples
.scroll-area {
max-height: 300px;
overflow: auto;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
Output
Adds scrollbars to the area only when content overflows, and truncates a single line with an ellipsis.
Notes
auto shows scrollbars only when needed; scroll always. Use overflow-x/overflow-y for one axis. Setting any non-visible value creates a scroll container and a block formatting context.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |