Styling & CSS · CSS
Overflow
Also called: Scroll container, Text truncation, Ellipsis, Scrollbar
How content is handled when it's bigger than its container. It can spill outside, get clipped, show a scrollbar, or have long text cut off with an ellipsis.
In detail
When content is wider or taller than its container, that's overflow. overflow decides what happens: visible (the default, content spills outside), hidden (clip what doesn't fit), auto (show a scrollbar only when needed, the most common choice), and scroll (always show a scrollbar). overflow-x and overflow-y control horizontal and vertical separately.
Truncating long text belongs here too. Single-line truncation needs white-space: nowrap, overflow: hidden, and text-overflow: ellipsis together. Multi-line truncation uses line-clamp, which is line-clamp-2 in Tailwind.
Common problems: if the page wobbles left and right on a phone, some element is usually too wide and overflowing horizontally. overflow: hidden breaks sticky positioning, and also clips dropdown menus.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-overflow- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026