Syntax
overflow: visible | hidden | scroll | auto;Examples
Basic Overflow Values
The four core values and their visual effect.
.visible { overflow: visible; } /* content spills out, default */
.hidden { overflow: hidden; height: 100px; } /* content beyond 100px is clipped */
.scroll { overflow: scroll; height: 100px; } /* always shows scrollbars */
.auto { overflow: auto; height: 100px; } /* scrollbars only appear if needed */Truncating Text with Ellipsis
A common combination for single-line text truncation.
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* "This is a very long heading..." */Parameters and values
- visible (keyword): Default - overflowing content is not clipped
- hidden (keyword): Overflowing content is clipped and inaccessible
- scroll (keyword): Always shows scrollbars, even if content fits
- auto (keyword): Shows scrollbars only when content overflows
Best practices
- Use overflow: auto over overflow: scroll in most cases, so scrollbars only appear when actually needed
- Setting overflow: hidden on a parent is a classic (if slightly dated) way to contain floated children - modern layouts typically use flexbox/grid instead
- Combine overflow: hidden with text-overflow: ellipsis and white-space: nowrap for single-line text truncation
- Remember overflow: hidden clips focusable content too - test keyboard navigation around clipped areas
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
The Box Model
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.box-sizing
box-sizing controls how an element's total width and height are calculated. The default, content-box, means padding and border are added on top of the declared width, making sizing math confusing. border-box includes padding and border within the declared width instead, which is why nearly every modern CSS reset sets it globally.display Property
The display property determines how an element generates boxes and participates in layout. block elements start on a new line and fill available width. inline elements flow within text and ignore width/height. inline-block combines inline flow with block-like sizing control. none removes the element from layout entirely.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.box-sizing
box-sizing controls how an element's total width and height are calculated. The default, content-box, means padding and border are added on top of the declared width, making sizing math confusing. border-box includes padding and border within the declared width instead, which is why nearly every modern CSS reset sets it globally.display Property
The display property determines how an element generates boxes and participates in layout. block elements start on a new line and fill available width. inline elements flow within text and ignore width/height. inline-block combines inline flow with block-like sizing control. none removes the element from layout entirely.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.