Overflow & Text Wrapping
Handle content that is larger than its box.
Syntax
overflow: auto; text-overflow: ellipsis;When content is too big for its box, the overflow property decides what happens:
visible— content spills out (default).hidden— extra content is clipped.scroll— always show scrollbars.auto— scrollbars appear only when needed.
Combine white-space: nowrap, overflow: hidden, and text-overflow: ellipsis to truncate long text with an ellipsis.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer sets overflow: hidden on a card container so that a child image with border-radius does not overflow the rounded corners.
- A developer sets overflow-y: auto on a fixed-height sidebar so users can scroll its content without the page scrollbar being affected.
- A designer uses text-overflow: ellipsis with white-space: nowrap to truncate long product names in a constrained grid card.
More examples
Hidden overflow for rounded card image
Sets overflow: hidden on the card so the child image is clipped to the parent's border-radius corners.
.card {
border-radius: 12px;
overflow: hidden;
width: 300px;
}
.card img {
width: 100%;
display: block;
}Scrollable fixed-height sidebar
Enables vertical scrolling inside a full-height sidebar while hiding any horizontal overflow.
.sidebar {
width: 260px;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
}Ellipsis for text overflow
The three-property pattern that truncates overflowing text with an ellipsis in a single-line constrained container.
.product-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
Discussion