CSS में ओवरफ्लो (Overflow) क्या है?

Siddharth Sharma
Mar 2, 2025
3 min read

CSS में, ओवरफ्लो (Overflow) उस कंटेंट के व्यवहार को संदर्भित करता है जो अपने कंटेनर (Container) की सीमाओं से बाहर निकल जाता है। जब किसी एलिमेंट (Element) के अंदर का कंटेंट उसकी परिभाषित चौड़ाई (Width) और ऊंचाई (Height) से बड़ा हो जाता है, तो ओवरफ्लो प्रॉपर्टी (Overflow Property) यह निर्धारित करती है कि अतिरिक्त कंटेंट (Extra Content) को कैसे हैंडल (Handle) किया जाए।

overflow प्रॉपर्टी (Property)

overflow प्रॉपर्टी का उपयोग यह नियंत्रित करने के लिए किया जाता है कि कंटेंट को कैसे प्रदर्शित (Display) किया जाए जब वह अपने कंटेनर से ओवरफ्लो हो जाता है। यह निम्नलिखित वैल्यू (Values) ले सकती है:

visible (डिफ़ॉल्ट):
- कंटेंट को क्लिप (Clip) नहीं किया जाता है और यह कंटेनर के बाहर दिखाई देगा।
- इससे कंटेंट पेज पर अन्य एलिमेंट्स (Elements) के साथ ओवरलैप (Overlap) हो सकता है।
css
.container { overflow: visible; }
hidden:
- ओवरफ्लो होने वाला कंटेंट क्लिप (Clip) हो जाता है और छिपा (Hidden) रहता है।
- स्क्रॉलबार (Scrollbar) प्रदान नहीं किए जाते हैं, और उपयोगकर्ता (User) ओवरफ्लो कंटेंट को नहीं देख सकते।
css
.container { overflow: hidden; }
scroll:
- कंटेनर में हमेशा स्क्रॉलबार (Scrollbar) जोड़े जाते हैं, चाहे कंटेंट ओवरफ्लो हो या न हो।
- उपयोगकर्ता छिपे हुए कंटेंट को देखने के लिए स्क्रॉल (Scroll) कर सकते हैं।
css
.container { overflow: scroll; }
auto:
- स्क्रॉलबार (Scrollbar) केवल तब जोड़े जाते हैं जब आवश्यक हो (यानी जब कंटेंट ओवरफ्लो होता है)।
- यह रिस्पॉन्सिव डिज़ाइन (Responsive Design) के लिए सबसे अधिक उपयोग की जाने वाली वैल्यू (Value) है।
css
.container { overflow: auto; }
clip:
- hidden के समान है, लेकिन यह प्रोग्रामेटिक स्क्रॉलिंग (Programmatic Scrolling) (जैसे JavaScript के माध्यम से) को अक्षम (Disable) कर देता है।
- इसे CSS3 में पेश किया गया था।
css
.container { overflow: clip; }
overlay (अप्रचलित):
- स्क्रॉलबार (Scrollbar) कंटेंट के ऊपर प्रदर्शित होते हैं और जगह (Space) नहीं लेते।
- यह अब अनुशंसित (Recommended) नहीं है और व्यापक रूप से समर्थित (Supported) नहीं है।

विशिष्ट दिशाओं में ओवरफ्लो (Overflow in Specific Directions)

CSS विशिष्ट दिशाओं में ओवरफ्लो को नियंत्रित करने के लिए निम्नलिखित प्रॉपर्टीज (Properties) प्रदान करता है:

overflow-x: क्षैतिज (Horizontal) ओवरफ्लो (बाएं और दाएं) को नियंत्रित करता है।
overflow-y: लंबवत (Vertical) ओवरफ्लो (ऊपर और नीचे) को नियंत्रित करता है।

उदाहरण:

css

.container {
    overflow-x: hidden; /* क्षैतिज ओवरफ्लो को छिपाएं */
    overflow-y: scroll; /* लंबवत स्क्रॉलबार जोड़ें */
}

ओवरफ्लो (Overflow) के सामान्य उपयोग (Common Use Cases)

स्क्रॉल करने योग्य कंटेनर (Scrollable Containers):
- लंबे कंटेंट (Long Content) के लिए स्क्रॉल करने योग्य क्षेत्र (Scrollable Areas) बनाने के लिए overflow: auto या overflow: scroll का उपयोग करें, जैसे टेबल (Tables) या सूचियां (Lists)।
ओवरफ्लो को छिपाना (Hiding Overflow):
- कंटेनर से बाहर निकलने वाले कंटेंट को छिपाने के लिए overflow: hidden का उपयोग करें, जैसे इमेज (Images) या टेक्स्ट (Text)।
रिस्पॉन्सिव डिज़ाइन (Responsive Design):
- यह सुनिश्चित करने के लिए कि स्क्रॉलबार केवल आवश्यकता पड़ने पर दिखाई दें, overflow: auto का उपयोग करें, जो विभिन्न स्क्रीन आकारों (Screen Sizes) पर उपयोगिता (Usability) को बेहतर बनाता है।
कस्टम स्क्रॉलबार (Custom Scrollbars):
- overflow: scroll को कस्टम स्क्रॉलबार स्टाइलिंग (Custom Scrollbar Styling) के साथ जोड़ें (WebKit ब्राउज़रों में ::-webkit-scrollbar का उपयोग करके)।

उदाहरण: ओवरफ्लो (Overflow) का उपयोग

html

<div class="container">
    यह एक लंबा टेक्स्ट (Text) है जो कंटेनर से ओवरफ्लो हो जाएगा। 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

css

.container {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: auto; /* स्क्रॉलबार केवल आवश्यकता पड़ने पर दिखाई देंगे */
}

ओवरफ्लो (Overflow) से संबंधित संभावित समस्याएं (Potential Issues)

अनचाहे लेआउट शिफ्ट (Unintended Layout Shifts):
- स्क्रॉलबार के दिखने/गायब होने से लेआउट शिफ्ट (Layout Shifts) हो सकते हैं, खासकर रिस्पॉन्सिव डिज़ाइन (Responsive Design) में।
एक्सेसिबिलिटी संबंधी चिंताएं (Accessibility Concerns):
- छिपा हुआ कंटेंट (overflow: hidden) स्क्रीन रीडर (Screen Readers) या कीबोर्ड उपयोगकर्ताओं (Keyboard Users) के लिए सुलभ (Accessible) नहीं हो सकता है।
प्रदर्शन (Performance):
- स्क्रॉल करने योग्य क्षेत्रों (Scrollable Areas) का अत्यधिक उपयोग प्रदर्शन (Performance) को प्रभावित कर सकता है, खासकर कम संसाधन वाले डिवाइस (Low-End Devices) पर।

बेस्ट प्रैक्टिसेज (Best Practices)

अनावश्यक स्क्रॉलबार से बचने के लिए overflow: scroll के बजाय overflow: auto का उपयोग करें।
विभिन्न स्क्रीन आकारों (Screen Sizes) और डिवाइस (Devices) पर ओवरफ्लो व्यवहार (Overflow Behavior) का परीक्षण (Test) करें।
सुनिश्चित करें कि छिपा हुआ कंटेंट सभी उपयोगकर्ताओं (Users) के लिए सुलभ (Accessible) हो।

overflow प्रॉपर्टी (Property) को समझकर और प्रभावी ढंग से उपयोग करके, आप CSS में अधिक लचीले (Flexible) और उपयोगकर्ता-अनुकूल (User-Friendly) लेआउट (Layout) बना सकते हैं।