अतिप्रवाह - सीएसएस-ट्रिक्स

overflowसंपत्ति नियंत्रण क्या सामग्री के लिए होता है कि अपनी सीमा के बाहर टूटता है: कल्पना एक divहै जिसमें आप स्पष्ट रूप से विस्तृत 200px होने के लिए निर्धारित किया है, लेकिन ऐसी छवि 300px विस्तृत होता है। वह छवि div से बाहर निकलेगी और visibleडिफ़ॉल्ट रूप से होगी। जबकि यदि आप overflowमान सेट करते हैं hidden, तो छवि 200px पर कट जाएगी।

div ( overflow: visible | hidden | scroll | auto | inherit )

मूल्यों

• visible: जब यह अपने बॉक्स के बाहर बढ़ता है तो सामग्री को क्लिप नहीं किया जाता है। यह संपत्ति का डिफ़ॉल्ट मान है
• hidden: अतिप्रवाह सामग्री छिपाई जाएगी।
• scroll: उपयोगकर्ताओं को छिपा सामग्री के माध्यम से स्क्रॉल करने में सक्षम होने के अलावा छिपे हुए के समान
• auto: यदि सामग्री उसके बॉक्स के बाहर निकलती है, तो वह सामग्री छिपा दी जाएगी जबकि स्क्रॉल पट्टी उपयोगकर्ताओं के बाकी सामग्री को पढ़ने के लिए दिखाई देनी चाहिए।
• initial: डिफ़ॉल्ट मान का उपयोग करता है जो है visible
• inherit: अपने मूल तत्व के मूल्य पर अतिप्रवाह सेट करता है।

याद रखें कि पाठ स्वाभाविक रूप से एक तत्व के अंत में लपेटेगा (जब तक कि सफेद-स्थान नहीं बदला जाता है) इसलिए पाठ शायद ही कभी अतिप्रवाह का कारण होगा। जब तक एक ऊंचाई निर्धारित नहीं की जाती है, तब तक पाठ केवल एक तत्व को लंबा करने के साथ-साथ धक्का देगा। ओवरफ्लो अधिक सामान्यतः तब खेला जाता है जब स्पष्ट चौड़ाई और ऊँचाई निर्धारित की जाती है और यह किसी भी सामग्री को फैलाने के लिए अवांछनीय होगा, या जब स्क्रॉलिंग से स्पष्ट रूप से बचा जा रहा है।

दर्शनीय

यदि आप अतिप्रवाह संपत्ति सेट नहीं करते हैं, तो डिफ़ॉल्ट दिखाई देता है। तो सामान्य तौर पर, इस संपत्ति को स्पष्ट रूप से तब तक सेट करने का कोई कारण नहीं है जब तक कि आप इसे कहीं और सेट होने से नहीं बचा रहे हैं।

यहां याद रखने वाली महत्वपूर्ण बात यह है कि भले ही सामग्री बॉक्स के बाहर दिखाई देती है, लेकिन यह सामग्री पृष्ठ के प्रवाह को प्रभावित नहीं करती है। उदाहरण के लिए:

आम तौर पर, आपको वेब टेक्स्ट के साथ बॉक्सों पर वैसे भी स्थिर ऊंचाइयों को सेट नहीं करना चाहिए, इसलिए यह ऊपर नहीं आना चाहिए।

छिपा हुआ

दिखाई देने वाले डिफ़ॉल्ट के विपरीत छिपा हुआ है । यह शाब्दिक रूप से बॉक्स के बाहर फैली किसी भी सामग्री को छुपाता है।

यह गतिशील सामग्री और अतिप्रवाह की संभावना के साथ उपयोग में विशेष रूप से उपयोगी है, जिससे गंभीर लेआउट समस्याएं पैदा होती हैं। हालांकि, इस बात को ध्यान में रखें कि इस तरह से छिपी हुई सामग्री पूरी तरह से दुर्गम है (स्रोत को देखने की कमी)। इसलिए उदाहरण के लिए एक उपयोगकर्ता के पास अपने डिफ़ॉल्ट आकार का आकार है जो आप अपेक्षा से बड़ा है, आप एक बॉक्स के बाहर पाठ को धक्का दे सकते हैं और इसे उनके दृष्टिकोण से पूरी तरह से छिपा सकते हैं।

स्क्रॉल

स्क्रॉल करने के लिए एक बॉक्स के ओवरफ्लो मूल्य को सेट करना सामग्री को बॉक्स के बाहर रेंडर करने से छिपाएगा, लेकिन सामग्री को देखने के लिए बॉक्स के इंटीरियर को स्क्रॉल करने के लिए स्क्रॉलबार की पेशकश करेगा।

इस मूल्य के साथ ध्यान दें कि आपको कोई भी क्षैतिज और ऊर्ध्वाधर स्क्रॉलबार मिलता है, भले ही उस सामग्री को केवल एक या दूसरे की आवश्यकता हो।

इस मूल्य के लिए iOS की गति स्क्रॉल को सक्षम किया जा सकता है -webkit-overflow-scrolling।

नोट: OS X Lion में, जब स्क्रॉलबार्स का उपयोग करने के लिए केवल दिखाने के लिए सेट किया जाता है, scrollअधिक व्यवहार करता है auto, जिसमें केवल स्क्रॉलबार की आवश्यकता होगी।

ऑटो

ऑटो अतिप्रवाह स्क्रॉल मूल्य के समान है, केवल यह स्क्रॉलबार प्राप्त करने की समस्या को हल करता है जब आपको उनकी आवश्यकता नहीं होती है। स्क्रॉलबार केवल तभी दिखाई देगा जब कोई ऐसी सामग्री हो जो वास्तव में तत्व से बाहर हो।

ओवरफ्लो-एक्स और ओवरफ्लो-वाई

यह भी साथ क्षैतिज या लंबवत सामग्री के अतिप्रवाह हेरफेर करने के लिए संभव है overflow-xऔर overflow-yगुण। उदाहरण के लिए क्षैतिज ओवरफ्लो के नीचे डेमो में स्क्रॉल किया जा सकता है, जबकि बॉक्स की ऊंचाई से परे फैले हुए पाठ को छिपाया गया है:

.box ( overflow-y: hidden; overflow-x: scroll; )

फ्लोट क्लियरिंग

अतिप्रवाह सेटिंग के अधिक लोकप्रिय उपयोगों में से एक, विचित्र रूप से पर्याप्त है, फ्लोट समाशोधन है। अतिप्रवाह सेट करना तत्व पर फ्लोट को स्पष्ट नहीं करता है, यह स्वयं को साफ करता है। इसका मतलब यह है कि अतिप्रवाह (किसी भी मान को छोड़कर visible) वाला तत्व उतना ही बड़ा होगा जितना कि उसमें घुले हुए (बदले के बजाय) बाल तत्वों को घेरने की जरूरत है, यह मानते हुए कि ऊंचाई घोषित नहीं है। इस कदर:

एक बेहतर फ्लोट क्लियरिंग तकनीक क्लीयरफिक्स है, क्योंकि इसके लिए आपको ओवरफ्लो प्रॉपर्टी को उस तरह से बदलने की आवश्यकता नहीं है, जिसकी आपको जरूरत नहीं है।

ब्लॉक प्रारूपण संदर्भ उत्पन्न करना

यह ध्यान रखना दिलचस्प है कि overflowएक नया ब्लॉक स्वरूपण संदर्भ भी बनाएगा, जो उपयोगी है यदि हम एक फ्लोटेड के बगल में एक ब्लॉक तत्व को संरेखित करना चाहते हैं। नीचे दिए गए उदाहरण में हम दिखाते हैं कि कैसे कई पैराग्राफ डिफ़ॉल्ट रूप से एक फ्लोट की गई छवि के साथ बातचीत करेंगे और फिर हम overflow: hiddenटेक्स्ट को अपने बॉक्स में संरेखित करने के लिए उपयोग करते हैं:

यह निकोल सुलिवन द्वारा एक महान पोस्ट से आता है जो मीडिया ऑब्जेक्ट को प्रेरित करने के लिए चला गया।

क्या स्क्रॉलबार को सीएसएस के साथ स्टाइल किया जा सकता है?

आप IE (v5.5?) में स्क्रॉलबार की शैली में सक्षम हो सकते थे, लेकिन अब और नहीं। आप उन्हें अब फिर से WebKit ब्राउज़रों में स्टाइल कर सकते हैं। यदि आपको क्रॉस-ब्राउज़र कस्टम स्क्रॉलबार की आवश्यकता है, तो जावास्क्रिप्ट देखें।

यदि किसी तत्व को ओवरफ्लो वैल्यू का सम्मान करने के लिए स्क्रॉलबार की आवश्यकता होती है, तो दृश्यमान चौड़ाई / ऊंचाई को घोषित रखते हुए, फ़ायरफ़ॉक्स उन्हें तत्व के बाहर रखता है। IE स्क्रॉलबार्स को अंदर रखता है, समग्र चौड़ाई / ऊंचाई को घोषित रखते हुए।

डेमो

इस नमूने पृष्ठ से लिए गए इस लेख के लिए डेमो।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
91	87	1 1	88	टी.पी.

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	14.0-14.4

सम्बंधित

• चल संपत्ति

अधिक जानकारी

• विनम्र क्लीयरफिक्स को समझना
• अतिप्रवाह: एक गुप्त लाभ
• एमडीएन पर अतिप्रवाह
• W3C पर अतिप्रवाह
• अनपेक्षित बॉडी ओवरफ्लो का पता लगाना / ठीक करना