CSS ओवरफ़्लो

कभी-कभी content अपने बॉक्स से बड़ा होता है। छोटे बॉक्स में लंबा notice, सँकरी column में चौड़ी table, chat message जो बढ़ता ही जाता है। overflow property तय करती है कि browser extra content के साथ क्या करे: उसे बाहर निकलने दे, काट दे, या scrollbars जोड़ दे।

Diagram — देखें, यह सब कैसे जुड़ता है

Overflow तभी मायने रखता है जब बॉक्स का size तय हो — तय width और height। अगर बॉक्स को बढ़ने दिया जाए, तो content उसे बस लंबा कर देता है और overflow होने को कुछ नहीं बचता। इसलिए पहला कदम हमेशा तय height है।

Visible — डिफ़ॉल्ट, content बाहर निकल जाता है

overflow: visible डिफ़ॉल्ट है। Extra content बॉक्स से बाहर बहता है और नीचे वाली चीज़ों पर चढ़ जाता है। कुछ छिपता नहीं, पर पेज गंदा दिख सकता है — text के ऊपर text बैठा हुआ। इसे तब इस्तेमाल करें जब आप जानबूझकर content को बॉक्स से बाहर निकालना चाहते हैं, गलती से लगभग कभी नहीं।

Hidden — काट दो

overflow: hidden extra content को बॉक्स के किनारे पर काट देता है। जो फिट नहीं होता वह बस गायब हो जाता है, और उसे scroll करके देखने का कोई तरीका नहीं है। यह image cards और banners के लिए काम आता है, जहाँ आप साफ़ किनारा चाहते हैं और कटे हुए हिस्से की परवाह नहीं करते।

Scroll — हमेशा scrollbar दिखाओ

overflow: scroll बॉक्स में scrollbars जोड़ देता है, हमेशा — भले ही content फिट हो और scroll करने को कुछ न हो। बॉक्स का size वही रहता है और visitor उसके अंदर scroll कर सकता है। यह भारी दिखता है, इसलिए यह शायद ही सबसे अच्छा चुनाव है।

Auto — scrollbar सिर्फ जब ज़रूरत हो

overflow: auto समझदार वाला है। Scrollbars तभी दिखते हैं जब content बॉक्स के लिए सच में बहुत बड़ा हो। अगर सब कुछ फिट हो जाता है, तो बॉक्स सादा दिखता है। यह वह मान है जिसे आप सबसे ज़्यादा इस्तेमाल करेंगे — notice boards, chat windows और लंबे code blocks के लिए।

Overflow-x और overflow-y — एक बार में एक दिशा

कभी-कभी आप दोनों दिशाओं को अलग-अलग नियंत्रित करना चाहते हैं। overflow-x बगल की दिशा सँभालता है, overflow-y ऊपर-नीचे की। Notice board को आमतौर पर overflow-y: auto चाहिए — notices में नीचे scroll करें, पर कभी बगल की ओर नहीं।

Syntax — overflow के मान

.notice-board {
  width: 300px;
  height: 120px;
  overflow-y: auto;
}
.image-card {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

आम गलतियाँ

• तय height के बिना बॉक्स पर overflow लगाना — बॉक्स बस लंबा हो जाता है और कुछ overflow नहीं होता।
• overflow: hidden से वह text छिपाना जिसकी visitor को अब भी ज़रूरत है, बिना उसे scroll करके देखने का तरीका दिए।
• हर जगह overflow: scroll इस्तेमाल करना, जिससे हर बॉक्स खाली होने पर भी grey scrollbars दिखाता है।
• Body पर overflow-x: hidden लगाना भूल जाना कि इससे पेज के नीचे position: sticky टूट सकता है।
• overflow: auto से horizontal scrollbar की उम्मीद करना जबकि असली समस्या तय चौड़ाई वाली table है जिसे wrapper div चाहिए।

याद रखें

• Visible content को बाहर निकलने देता है; hidden उसे काट देता है; scroll हमेशा scrollbars दिखाता है; auto उन्हें सिर्फ ज़रूरत पर दिखाता है।
• Overflow के लिए तय height चाहिए — उसके बिना, बॉक्स बस बढ़ता जाता है।
• overflow-x बगल की दिशा नियंत्रित करता है, overflow-y ऊपर-नीचे की।
• overflow: auto वह मान है जिसे आप सबसे ज़्यादा इस्तेमाल करेंगे, notice boards और chat boxes के लिए।
• Content को overflow: hidden से कभी न छिपाएँ, जब तक आप पक्के न हों कि किसी को उसकी ज़रूरत नहीं है।
• तरकीब: Auto समझदार है — scrollbar तभी, जब ज़रूरत हो।

उदाहरण समझिए

• .box { width: 220px; height: 100px; display: inline-block; } — हर demo बॉक्स का size तय है ताकि content overflow कर सके, और चारों बॉक्स साथ-साथ बैठते हैं।
• .visible { overflow: visible; } — extra text पहले बॉक्स से बाहर निकलता है और नीचे वाले text पर चढ़ जाता है।
• .hidden { overflow: hidden; } — दूसरे बॉक्स का extra text किनारे पर कट जाता है, उसे scroll करके देखने का कोई तरीका नहीं है।
• .scroll { overflow: scroll; } — तीसरा बॉक्स हमेशा scrollbars दिखाता है, भले ही उसका text छोटा हो।
• .auto { overflow: auto; } — चौथा बॉक्स scrollbars सिर्फ इसलिए दिखाता है क्योंकि उसका text बहुत लंबा है — असली पेजों में यही इस्तेमाल करना है।
• .notice { width: 300px; height: 120px; overflow-y: auto; } — notice board notices में ऊपर-नीचे scroll होता है, पर कभी बगल की ओर नहीं।