📘 Lesson · Lesson 22

Overflow

What Overflow Is

Overflow happens when an element's content is bigger than the element itself — for example, a lot of text in a fixed-height box, or a wide table in a narrow container. By default, that content simply SPILLS OUT, visibly overflowing the box's edges (often overlapping other content messily). The overflow property lets you control what happens to this spilling content: let it show, clip it, or add a scrollbar. It connects directly to the height lesson: fixed sizes cause overflow, and this is how you handle it.

The Four Values

.box { overflow: visible; }   /* DEFAULT - content spills out, shows fully */
.box { overflow: hidden; }    /* clips off - extra content is cut and hidden */
.box { overflow: scroll; }    /* always shows scrollbars */
.box { overflow: auto; }      /* scrollbars ONLY when needed (best) */

Value	Effect
visible	Default — content overflows and stays visible outside the box
hidden	Extra content is clipped (cut off) and hidden
scroll	Adds scrollbars always (even if not needed)
auto	Adds scrollbars only when content overflows — the smart choice

The most useful value is auto: it shows scrollbars ONLY when the content actually overflows, and none when it fits — exactly the behaviour you usually want. scroll forces scrollbars even when unneeded (ugly empty scrollbars). hidden simply cuts off the overflow (useful for hiding excess, but be careful — you might cut off important content). visible is the messy default that causes the spilling problem in the first place.

overflow-x and overflow-y — control each direction

overflow-x: auto;      /* horizontal scrolling only */
overflow-y: hidden;    /* clip vertical overflow */

/* Common: a wide table that scrolls sideways on mobile */
.table-wrapper {
    overflow-x: auto;
}

You can control horizontal (overflow-x) and vertical (overflow-y) overflow separately. A very common real use: wrapping a wide table in a container with overflow-x: auto so that on a narrow phone, the table scrolls sideways instead of breaking the whole page layout. This is the standard trick for making data tables responsive — the table stays intact, and users swipe across it. A practical fix worth remembering for the marksheet-style tables from earlier.

text-overflow: ellipsis — the "..." trick

.truncate {
    white-space: nowrap;      /* keep text on one line */
    overflow: hidden;         /* hide the overflow */
    text-overflow: ellipsis;  /* show "..." for cut text */
    width: 200px;
}

"This is a very long product title th..." (cut off cleanly with three dots instead of overflowing)

This three-line combo creates the "..." truncation you see everywhere — long titles, filenames, or descriptions cut off cleanly with an ellipsis instead of overflowing or wrapping. All three lines are needed together: white-space: nowrap forces one line, overflow: hidden hides the excess, and text-overflow: ellipsis adds the "…". This is a classic pattern for product cards, tables, and lists where space is tight. Memorise the trio — it's a genuinely useful everyday tool.

Real-World Uses

Scrollable areas: a fixed-height box with overflow-y: auto for a chat window or long list that scrolls internally.
Responsive tables: overflow-x: auto wrapper so wide tables scroll on mobile.
Clipping: overflow: hidden to crop images to a container's rounded corners, or hide decorative overflow.
Truncating text: the ellipsis trick for tidy titles in cards and lists.

Overflow is the tool that keeps content contained and layouts intact when things don't fit perfectly — which, on the varied screens of the real world, is often. Reach for auto as your default, hidden for clipping, and the ellipsis trio for text.

Exam Corner

Q: What is overflow? When content is larger than its box; by default it spills out visibly.

Q: Difference between scroll and auto? scroll always shows scrollbars; auto shows them only when content overflows.

Q: What does overflow: hidden do? Clips and hides content that exceeds the box.

Q: How do you make a wide table scroll sideways on mobile? Wrap it in a container with overflow-x: auto.

Q: What three properties create text ellipsis? white-space: nowrap, overflow: hidden, text-overflow: ellipsis.

Overflow क्या है

Overflow तब होता है जब element का content खुद element से बड़ा हो — जैसे fixed-height box में बहुत सारा text, या तंग container में चौड़ी table. Default रूप से वह content बस CHHALAKTA है, box के किनारों से दिखाई देते हुए overflow होते (अक्सर दूसरे content पर गंदे तरीके से overlap करते). overflow property इस छलकते content का क्या हो control करने देती है: दिखने दो, clip करो, या scrollbar जोड़ो. यह height lesson से सीधे जुड़ता है: fixed sizes overflow पैदा करते हैं, और इसे ऐसे handle करते हैं.

चार Values

.box { overflow: visible; }   /* DEFAULT - content chhalakta, poora dikhta */
.box { overflow: hidden; }    /* clip - extra content kat kar chhupata */
.box { overflow: scroll; }    /* hamesha scrollbars dikhata */
.box { overflow: auto; }      /* scrollbars SIRF zaroorat par (best) */

Value	असर
visible	Default — content overflow होकर box के बाहर दिखता रहता
hidden	Extra content clip (कट) होकर छुपता
scroll	हमेशा scrollbars जोड़ता (ज़रूरत न हो तब भी)
auto	Scrollbars सिर्फ overflow पर — समझदार choice

सबसे उपयोगी value auto है: यह scrollbars सिर्फ तब दिखाता है जब content असल में overflow करे, fit होने पर कोई नहीं — ठीक वह व्यवहार जो आप आमतौर पर चाहते हैं. scroll बिना ज़रूरत के भी scrollbars थोपता है (भद्दे खाली scrollbars). hidden बस overflow काट देता है (excess छुपाने को उपयोगी, पर सावधान — ज़रूरी content कट सकता है). visible गंदा default है जो पहली जगह छलकने की समस्या पैदा करता है.

overflow-x और overflow-y — हर दिशा control

overflow-x: auto;      /* sirf horizontal scrolling */
overflow-y: hidden;    /* vertical overflow clip */

/* Common: chaudi table jo mobile par side me scroll ho */
.table-wrapper {
    overflow-x: auto;
}

Horizontal (overflow-x) और vertical (overflow-y) overflow अलग control कर सकते हैं. बहुत common असली इस्तेमाल: चौड़ी table को overflow-x: auto वाले container में लपेटना ताकि तंग phone पर table पूरे page layout को तोड़ने के बजाय side में scroll हो. Data tables को responsive बनाने का यह standard trick है — table बरकरार रहती है, और users उस पर swipe करते हैं. पहले की marksheet-style tables के लिए याद रखने लायक practical fix.

text-overflow: ellipsis — "..." trick

.truncate {
    white-space: nowrap;      /* text ek line par rakho */
    overflow: hidden;         /* overflow chhupao */
    text-overflow: ellipsis;  /* kate text ke liye "..." dikhao */
    width: 200px;
}

"This is a very long product title th..." (overflow ke bajaye teen dots se saaf kata)

यह तीन-line combo वह "..." truncation बनाता है जो हर जगह दिखता है — लंबे titles, filenames, या descriptions overflow या wrap होने के बजाय ellipsis से साफ कटे. तीनों lines साथ ज़रूरी: white-space: nowrap एक line थोपता, overflow: hidden excess छुपाता, और text-overflow: ellipsis "…" जोड़ता. Product cards, tables, और lists के लिए classic pattern जहां जगह तंग है. तिकड़ी याद कीजिए — सच में उपयोगी रोज़ का tool.

असली इस्तेमाल

Scrollable areas: overflow-y: auto वाला fixed-height box chat window या लंबी list के लिए जो अंदर scroll हो.
Responsive tables: overflow-x: auto wrapper ताकि चौड़ी tables mobile पर scroll हों.
Clipping: overflow: hidden images को container के rounded corners में crop करने को, या decorative overflow छुपाने को.
Text truncate: cards और lists में साफ titles के लिए ellipsis trick.

Overflow वह tool है जो चीज़ें perfectly fit न होने पर content को contained और layouts को बरकरार रखता है — जो असली दुनिया की विविध screens पर अक्सर होता है. Default के रूप में auto, clipping के लिए hidden, और text के लिए ellipsis तिकड़ी लीजिए.

Exam Corner

Q: Overflow क्या है? जब content अपने box से बड़ा हो; default रूप से दिखाई देते हुए छलकता है.

Q: scroll और auto में अंतर? scroll हमेशा scrollbars दिखाता; auto सिर्फ overflow पर.

Q: overflow: hidden क्या करता है? Box से बाहर जाने वाले content को clip करके छुपाता है.

Q: चौड़ी table mobile पर side में कैसे scroll कराते हैं? उसे overflow-x: auto वाले container में लपेटिए.

Q: कौन-सी तीन properties text ellipsis बनाती हैं? white-space: nowrap, overflow: hidden, text-overflow: ellipsis.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.