CSS Overflow
आप बॉक्स को निश्चित आकार दे सकते हैं। अगर सामग्री उस बॉक्स से ऊँची या चौड़ी हो तो? overflow तय करता है कि अतिरिक्त सामग्री बाहर निकले, कट जाए, या स्क्रॉल हो।
एक नज़र में कीवर्ड
📊 आम overflow मान
| मान | रोज़ का अर्थ |
|---|---|
visible (डिफ़ॉल्ट) |
अतिरिक्त सामग्री बॉक्स से बाहर निकल सकती है |
hidden |
अतिरिक्त कट जाता है; स्क्रॉलबार नहीं |
scroll |
स्क्रॉलबार दिखते हैं (अक्सर जरूरत न होने पर भी) |
auto |
स्क्रॉलबार तभी जब सामग्री overflow करे |
डिफ़ॉल्ट: सामग्री फैल सकती है
overflow: visible (डिफ़ॉल्ट) के साथ लंबी सामग्री बॉक्स किनारों के बाहर खिंच सकती है।
दिखने वाला overflow (डिफ़ॉल्ट)
css.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}hidden से काटें
overflow: hidden जो फिट न हो काट देता है। साफ किनारों के लिए अच्छा — लेकिन उपयोगकर्ता बाकी स्क्रॉल नहीं कर सकता।
Hidden spill काटता है
css.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}scroll से हमेशा स्क्रॉलबार
overflow: scroll बॉक्स को स्क्रॉलयोग्य बनाता है और अक्सर सामग्री फिट होने पर भी स्क्रॉलबार जगह रखता है।
हमेशा scroll
css.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}auto — जरूरत पड़ने पर स्क्रॉल
overflow: auto पैनलों के लिए शांत रोज़ विकल्प है: overflow पर स्क्रॉलबार आते हैं, और जरूरत न हो तो अक्सर दूर रहते हैं।
जरूरत पर auto
css.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}एक अक्ष नियंत्रित करें
जब क्षैतिज और ऊर्ध्वाधर व्यवहार अलग हों तो overflow-x और overflow-y उपयोग करें — जैसे ऊर्ध्वाधर स्क्रॉल, क्षैतिज spill काटना।
ऊर्ध्वाधर स्क्रॉल, क्षैतिज क्लिप
css.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}व्यावहारिक पैनल आदत
बॉक्स को असली ऊँचाई (या max-height) दें, फिर पठनीय स्क्रॉल क्षेत्रों के लिए auto चुनें।
स्क्रॉल योग्य नोट पैनल
css.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}खुद आज़माएँ
widthऔर छोटीheightवाला बॉक्स बनाएँ, कई पैराग्राफ डालें।overflowकोvisible,hidden,scroll,autoके बीच बदलें।- चौड़ी टेक्स्ट पंक्ति पर
overflow-x: hiddenऔरoverflow-y: autoलगाएँ। max-heightवाला.note-panelबनाएँ और जरूरत पर ही स्क्रॉलबार देखें।- बिना ऊँचाई सीमा (या max-height) overflow के पास अक्सर सीमित करने को कुछ नहीं होता।
आम गलतियाँ
- बिना सीमित ऊँचाई/चौड़ाई overflow प्रभाव की उम्मीद
- हर जगह
scrollजबautoशांत रहे - overflow (बॉक्स spill) को text-overflow से मिलाना (टेक्स्ट एलिप्सिस — बाद का औज़ार)
hiddenसे काटकर भूलना कि उपयोगकर्ता को बाकी चाहिए हो सकता है- सोचना कि overflow box-sizing हिसाब बदलता है (नहीं)
सार
- Overflow तब spill, क्लिप और स्क्रॉल नियंत्रित करता है जब सामग्री बॉक्स से बड़ी हो
- डिफ़ॉल्ट
visible;hiddenकाटता है;scrollबार देता है;autoजरूरत पर - प्रभाव देखने के लिए आमतौर पर सीमित आकार (height / max-height / width) चाहिए
overflow-xऔरoverflow-yअक्ष अलग करते हैं- कई पैनलों के लिए
overflow: autoशांत आदत है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी