Syllabus

CSS Overflow: hidden, scroll, auto, clip and Text Truncation

Badar KhalilUpdated September 30, 2026 7 min read

CSS Overflow: hidden, scroll, auto, clip and text-overflow

The CSS overflow property controls what happens when content is too big for its box. Should it spill out, be cut off, or get a scrollbar? Overflow is behind scrollable panels, modals, carousels, truncated text and the dreaded accidental horizontal scrollbar, so it is one of the most practical properties to master.

What You Will Learn

All overflow values: visible, hidden, scroll, auto, clip
overflow-x and overflow-y and their surprising interaction
Truncating text with text-overflow: ellipsis and line-clamp
Breaking long words with overflow-wrap
scrollbar-gutter, overscroll-behavior and scroll snapping basics
How overflow interacts with position: sticky, margin collapse and block formatting contexts
How to find and fix unwanted horizontal scrolling

When Does Overflow Happen?

Overflow happens when the content of a box does not fit inside its set size. For example, a box with a fixed height: 100px that contains 300px of text will overflow vertically. If the height is auto, the box grows and there is no vertical overflow.

The Overflow Values

visible (default): content is not clipped and spills outside the box. It can overlap other elements.
hidden: content outside the padding box is clipped and cannot be reached by the user with scrollbars. It can still be scrolled with JavaScript or by focusing an element inside.
scroll: content is clipped and scrollbars are always shown, even if nothing overflows.
auto: scrollbars appear only when needed. This is usually the best choice for scrollable panels.
clip: like hidden, but no scroll container is created and programmatic scrolling is impossible. It is stricter and slightly cheaper.

overflow-x and overflow-y

You can control each axis separately. There is an important rule: if one axis is visible and the other is not, the visible value computes to auto. So overflow-x: auto; overflow-y: visible; does not give you visible vertical overflow. Use overflow-y: clip or restructure the layout if you need that. The shorthand overflow: hidden auto sets x then y.

Scroll Containers

Any element with overflow set to hidden, scroll or auto becomes a scroll container. A scroll container also creates a new block formatting context, which means it contains its floats and stops margin collapse between itself and its children. This is why overflow: hidden used to be a popular clearfix hack. Today prefer display: flow-root.

Truncating Text with an Ellipsis

Single line truncation needs three properties together:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

For multi-line truncation use line-clamp. The widely supported form is:

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

Breaking Long Words: overflow-wrap

Long URLs or unbroken strings can overflow their container. Use overflow-wrap: anywhere (or break-word) to let the browser break them. In flex and grid children, also set min-width: 0, because flex items default to min-width: auto and refuse to shrink below their content.

scrollbar-gutter

When a scrollbar appears, it can shift content sideways because it takes space. scrollbar-gutter: stable; reserves that space in advance so the layout does not jump when content grows. Use stable both-edges to keep centered content symmetric.

overscroll-behavior

overscroll-behavior: contain; on a scrollable panel, like a modal body or chat list, stops the page behind from scrolling when the user reaches the end of the panel (scroll chaining).

Scroll Snap Basics

On a scroll container, scroll-snap-type: x mandatory; together with scroll-snap-align: start; on children creates smooth carousel-like snapping without JavaScript.

overflow and position: sticky

A sticky element sticks relative to its nearest ancestor scroll container. If any ancestor has overflow: hidden, auto or scroll, sticky may seem broken because that ancestor becomes the scroll container. Fix it by removing overflow from the ancestor or by using overflow: clip, which does not create a scroll container.

overflow: hidden and Positioned Children

Overflow clipping only affects descendants whose containing block is the element or one of its descendants. An absolutely positioned child whose containing block is an ancestor outside the overflow element is not clipped by it. Dropdown menus often break for exactly this reason: they are clipped when their parent has overflow hidden and is the positioned ancestor.

Finding Unwanted Horizontal Scroll

Open DevTools and check which element is wider than the viewport. A quick debug rule is * { outline: 1px solid red; }.
Look for width: 100vw. The vw unit includes the vertical scrollbar width, so it causes overflow on desktop. Use 100% instead.
Check for fixed widths, wide images without max-width: 100%, wide tables and long unbroken text.
Check negative margins and absolutely positioned elements pushed off-screen.

Avoid fixing this with overflow-x: hidden on the body, because it hides the symptom and can break sticky positioning. Fix the element that is too wide.

Accessibility Notes

Scrollable regions must be reachable by keyboard. Add tabindex='0' and an accessible name (for example role='region' with aria-label) to scrollable areas that contain no focusable elements.
Do not hide important content with overflow: hidden and fixed height. Text zoom and translation can make text larger than expected.
Truncated text should be available in full elsewhere, such as a title attribute or expanded view.

Common Mistakes

Using overflow: scroll when auto is enough.
Expecting overflow-y: visible to work when overflow-x is auto.
Forgetting white-space: nowrap with text-overflow: ellipsis.
Using overflow-x: hidden on body to hide layout bugs.
Forgetting min-width: 0 on flex children that hold long text.

Frequently Asked Questions

What is the difference between overflow hidden and clip?

Both cut the content. hidden creates a scroll container (so it can still be scrolled by script and affects sticky), while clip does not.

Why is my text-overflow ellipsis not working?

You need a constrained width, overflow other than visible and white-space: nowrap. In flex layouts add min-width: 0 to the item.

Why is there a horizontal scrollbar on my page?

Some element is wider than the viewport. Common causes are 100vw, fixed widths and wide media. Find it in DevTools.

Does overflow: auto always show a scrollbar?

No. The scrollbar appears only when the content actually overflows.

Key Takeaways

Default is visible. Use auto for scroll panels, hidden or clip to cut content.
Ellipsis needs nowrap, overflow hidden and text-overflow together.
overflow creates a scroll container, which affects sticky, floats and margin collapse.
Use scrollbar-gutter and overscroll-behavior for polished scrolling.
Fix the wide element instead of hiding overflow on the body.

Try it Yourself HTML

<style>
.box { width: 180px; height: 70px; border: 2px solid #2c3e50; margin: 8px; padding: 6px; float: left; font-size: 14px; }
.v { overflow: visible; }
.h { overflow: hidden; }
.s { overflow: scroll; }
.a { overflow: auto; }
</style>
<div class='box v'>visible: this long text spills outside of the box and keeps going down the page.</div>
<div class='box h'>hidden: this long text is clipped at the padding edge and the rest is cut.</div>
<div class='box s'>scroll: scrollbars always show. Some more text to scroll through here.</div>
<div class='box a'>auto: scrollbar only when needed. Add more text to this box to see it appear.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.truncate { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #999; padding: 8px; }
</style>
<div class='truncate'>This is a very long single line of text that will be cut with an ellipsis.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.clamp { width: 260px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; border: 1px solid #999; padding: 8px; }
</style>
<p class='clamp'>Multi-line truncation shows only the first three lines of text and then adds an ellipsis. Everything after that is hidden, even if the paragraph is very long and keeps going for many more lines of content.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.row { display: flex; gap: 12px; width: 320px; border: 1px solid #999; padding: 8px; }
.icon { flex: none; width: 32px; height: 32px; background: #3498db; }
.text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
<div class='row'>
  <div class='icon'></div>
  <div class='text'>Flex child text truncates only because min-width is set to 0 on it.</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px; overscroll-behavior-x: contain; }
.slide { flex: 0 0 220px; height: 120px; background: #f5b7b1; scroll-snap-align: start; display: grid; place-items: center; font-family: sans-serif; }
</style>
<div class='carousel' tabindex='0' role='region' aria-label='Slides'>
  <div class='slide'>Slide 1</div><div class='slide'>Slide 2</div><div class='slide'>Slide 3</div><div class='slide'>Slide 4</div><div class='slide'>Slide 5</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
html { scrollbar-gutter: stable; }
.panel { height: 120px; overflow: auto; border: 1px solid #999; padding: 8px; }
</style>
<p>scrollbar-gutter: stable reserves space for the scrollbar so the layout does not jump.</p>
<div class='panel'>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8<br>Line 9<br>Line 10</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

/* Find elements wider than the viewport (paste in the DevTools console) */
const vw = document.documentElement.clientWidth;
const wide = [...document.querySelectorAll('body *')].filter(el => el.getBoundingClientRect().right > vw);
console.log('Elements causing horizontal overflow:', wide.length);
wide.forEach(el => console.log(el.tagName, el.className, Math.round(el.getBoundingClientRect().right)));

/* Check if a box overflows vertically or horizontally */
const box = document.createElement('div');
box.style.cssText = 'width:100px;height:50px;overflow:auto;';
box.innerHTML = '<div style="width:300px;height:200px"></div>';
document.body.appendChild(box);
console.log('scrollWidth:', box.scrollWidth, 'clientWidth:', box.clientWidth);
console.log('overflows:', box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight);
box.remove();

Output

Press Run to execute.

Exercise: Truncate with an EllipsisHTML

The title below wraps onto several lines and overflows its 200px card. Using only the .title rule, make it stay on one line and end with an ellipsis (three dots) when it is too long.

Try it Yourself HTML

<style>
.card { width: 200px; border: 1px solid #999; padding: 10px; }
.title { /* your CSS here */ }
</style>
<div class='card'>
  <div class='title'>A very long article title that should never wrap</div>
</div>

Output

Press Run to execute.

Show expected output

The title stays on one line and ends with an ellipsis.

This is a self-check — compare your result with the expected output above.

Exercise: Scrollable Chat PanelHTML

Make the .chat panel 150px tall with a vertical scrollbar that appears only when needed. Also stop the page behind it from scrolling when the user reaches the end of the panel.

Try it Yourself HTML

<style>
.chat { width: 260px; border: 1px solid #999; padding: 8px; /* your CSS here */ }
</style>
<div class='chat'>
  <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p><p>Message 5</p><p>Message 6</p><p>Message 7</p>
</div>

Output

Press Run to execute.

Show expected output

The panel is 150px tall, scrolls vertically only when needed and does not chain scrolling to the page.

This is a self-check — compare your result with the expected output above.

Exercise: Detect OverflowJAVASCRIPT

Write a function isOverflowing(scrollWidth, clientWidth, scrollHeight, clientHeight) that returns true if the content overflows on either axis.

Try it Yourself JAVASCRIPT

function isOverflowing(scrollWidth, clientWidth, scrollHeight, clientHeight) {
  // TODO: implement
}

console.log(isOverflowing(300, 100, 50, 50));
console.log(isOverflowing(100, 100, 200, 50));
console.log(isOverflowing(100, 100, 50, 50));

Output

Press Run to execute.

Show expected output

true
true
false

This is a self-check — compare your result with the expected output above.

Was this page helpful?