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

अतिप्रवाहित सामग्री को संभालना अच्छे वेब डिज़ाइन की एक महत्वपूर्ण विशेषता है।

जब आप किसी वेब पेज पर कोई तत्व डिज़ाइन कर रहे होते हैं, तो ऐसा परिदृश्य हो सकता है जहाँ तत्व की सामग्री उसकी सीमाओं के भीतर फ़िट न हो सके। यह आपके वेब पेज को अनपेक्षित तरीके से प्रस्तुत करने का कारण बन सकता है। यहीं पर CSS ओवरफ्लो प्रॉपर्टी आती है।

अतिप्रवाह संपत्ति का उपयोग ऐसे उदाहरणों को संभालने के लिए किया जाता है जहां किसी तत्व की सामग्री उसकी सीमा के भीतर फिट नहीं हो सकती है। उदाहरणों के संदर्भ में, यह ट्यूटोरियल आपके कोड में CSS ओवरफ्लो प्रॉपर्टी का उपयोग करने के तरीके के बारे में बताएगा।

CSS ओवरफ़्लो

अतिप्रवाह संपत्ति आपको यह निर्दिष्ट करने की अनुमति देती है कि क्या होता है जब सामग्री का एक टुकड़ा उस तत्व को निर्दिष्ट स्थान में फिट होने के लिए बहुत बड़ा होता है।

उदाहरण के लिए, मान लें कि आपने एक

टैग परिभाषित किया है जिसमें टेक्स्ट का एक पैराग्राफ प्रदर्शित होने के लिए सेट है। यह

टैग केवल 250px लंबा x 500px चौड़ा है, और अनुच्छेद के लिए निर्दिष्ट स्थान में फ़िट होने के लिए बहुत अधिक टेक्स्ट है।

आप इस समस्या से निपटने के लिए अतिप्रवाह संपत्ति का उपयोग कर सकते हैं और यह सुनिश्चित कर सकते हैं कि आपकी सामग्री उपयोगकर्ता की स्क्रीन पर सही ढंग से दिखाई दे। एक अतिप्रवाह गुण निर्दिष्ट करके, आप इस संभावना को कम कर सकते हैं कि वेब तत्व की सामग्री अनुचित रूप से दिखाई दे।

अतिप्रवाह संपत्ति के चार संभावित मूल्य हैं। य़े हैं:

दृश्यमान. किसी तत्व में अतिप्रवाह क्लिप नहीं किया जाता है, और सामग्री तत्व के बॉक्स के बाहर प्रस्तुत होती है। यह अतिप्रवाह संपत्ति के लिए डिफ़ॉल्ट मान है।
स्क्रॉल करें। एक तत्व में अतिप्रवाह को क्लिप किया जाता है, और एक स्क्रॉलबार बनाया जाता है ताकि उपयोगकर्ता किसी तत्व में शेष सामग्री को देख सके।
छिपा हुआ. किसी तत्व में अतिप्रवाह क्लिप किया गया है, और शेष सामग्री उपयोगकर्ता से छिपा दी जाएगी।
स्वतः. किसी तत्व में शेष सामग्री को देखने के लिए ऑटो स्क्रॉलबार जोड़ता है, लेकिन केवल तभी जब आवश्यक हो।

अतिप्रवाह गुण केवल उन ब्लॉक-स्तरीय तत्वों पर लागू किया जा सकता है जिन्हें "ऊंचाई" विशेषता का उपयोग करके एक विशिष्ट ऊंचाई सौंपी गई है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

CSS ओवरफ़्लो उदाहरण

आइए प्रत्येक संभावित मूल्यों के उदाहरण के माध्यम से चलते हैं जिनका उपयोग अतिप्रवाह संपत्ति के साथ किया जा सकता है। हम अतिप्रवाह से शुरू करेंगे:दृश्यमान संपत्ति।

दृश्यमान ओवरफ़्लो

दृश्यमान मान वेब तत्व के लिए डिफ़ॉल्ट अतिप्रवाह सेट है। दृश्यमान मान वाले तत्वों को क्लिप नहीं किया जाता है और उनकी सामग्री तत्व के बॉक्स के बाहर दिखाई देती है।

मान लीजिए हम एक बॉक्स डिजाइन कर रहे हैं जिसमें टेक्स्ट की कुछ पंक्तियां शामिल हैं। यदि हमारे द्वारा निर्दिष्ट पाठ बॉक्स के लिए बहुत बड़ा है, तो हम चाहते हैं कि यह बॉक्स के बाहर प्रस्तुत हो। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "visible".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: visible;
}

हमारा कोड लौटाता है:

[Code result here]

आइए हमारे कोड को तोड़ दें। हमारे कोड में, हमने एक बॉक्स बनाया है जो 200px चौड़ा और 100px लंबा है। हमारे बॉक्स में हल्के भूरे रंग की पृष्ठभूमि का रंग है। ये शैलियाँ आपके कोड में

टैग पर लागू होती हैं।

इसके अलावा, हमने overflow: visible . सामग्री का उपयोग किया है संपत्ति हमारे कोड को निर्देश देने के लिए है कि, यदि हमारे

टैग में टेक्स्ट तत्व में फिट नहीं हो सकता है, तो टेक्स्ट तत्व के बॉक्स के बाहर प्रस्तुत होना चाहिए। जैसा कि आप देख सकते हैं, इसके परिणामस्वरूप कुछ पाठ overflowing हो गया है सबसे अलग।

अतिप्रवाह दृश्यमान मान, उपयोगी होते हुए भी, अतिप्रवाह गुण के लिए अन्य मानों की तरह उपयुक्त नहीं हो सकता है। ऐसा इसलिए है क्योंकि ज्यादातर मामलों में आप नहीं चाहते कि किसी तत्व की सामग्री अतिप्रवाह हो, क्योंकि अतिप्रवाह सामग्री आपके द्वारा वेब पेज के लिए बनाई गई अन्य शैलियों में हस्तक्षेप कर सकती है।

स्क्रॉल ओवरफ़्लो

स्क्रॉल मान आपको वेब तत्व की अतिप्रवाह सामग्री को क्लिप करने की अनुमति देता है। फिर, तत्व में एक स्क्रॉल बार जोड़ा जाएगा ताकि उपयोगकर्ता अतिप्रवाह सामग्री देख सके।

स्क्रॉल ओवरफ़्लो मान वेब तत्व में लंबवत और क्षैतिज स्क्रॉल बार दोनों जोड़ता है, भले ही आपको इनमें से किसी एक स्क्रॉल बार की आवश्यकता न हो।

मान लीजिए कि हम एक बॉक्स डिजाइन कर रहे हैं और हम चाहते हैं कि कोई भी ओवरफ्लो टेक्स्ट हमारे बॉक्स के अंदर रहे। यदि कोई अतिप्रवाहित पाठ मौजूद है, तो एक स्क्रॉल बार दिखाई देना चाहिए ताकि उपयोगकर्ता बॉक्स के माध्यम से अपना रास्ता नेविगेट कर सके।

यहां वह कोड है जिसका उपयोग हम अपने बॉक्स को डिजाइन करने के लिए कर सकते हैं:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "scroll".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: scroll;
}

हमारा कोड लौटाता है:

[Code result here]

हमारे कोड में, हमने 200px चौड़ा x 100px लंबा एक बॉक्स बनाया है। हमारे बॉक्स में हल्के भूरे रंग की पृष्ठभूमि का रंग है।

इसके अलावा, हम अतिप्रवाह संपत्ति को "स्क्रॉल" के बराबर सेट करते हैं। जैसा कि आप देख सकते हैं, क्योंकि हमारे बॉक्स में फिट होने के लिए बहुत अधिक टेक्स्ट है, एक स्क्रॉल बार दिखाई देता है और हमारा ओवरफ्लो टेक्स्ट हमारे बॉक्स की सीमाओं के भीतर रहता है।

ऑटो ओवरफ़्लो

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

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

ऑटो मान स्क्रॉल मान के समान कार्य करता है, लेकिन यह आवश्यक होने पर केवल वेब तत्व में स्क्रॉल बार जोड़ता है। मान लीजिए कि हमारे पास टेक्स्ट का एक बॉक्स है और हम केवल आवश्यक होने पर ही बॉक्स में स्क्रॉल बार जोड़ना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "auto".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: auto;
}

हमारा कोड लौटाता है:

[Code result here]

हमारे उपरोक्त उदाहरण में, हमने हल्के भूरे रंग की पृष्ठभूमि के साथ 200px चौड़ा x 100px लंबा बॉक्स बनाया है। फिर हम ओवरफ्लो प्रॉपर्टी का मान ऑटो पर सेट करते हैं। जैसा कि आप देख सकते हैं, हमारे अंतिम परिणाम में केवल एक स्क्रॉल बार दिखाई दे रहा है। ऐसा इसलिए है क्योंकि हमारे टेक्स्ट बॉक्स में ओवरफ्लो होने वाली सामग्री को दिखाने के लिए केवल एक स्क्रॉल बार आवश्यक है।

हिडन ओवरफ़्लो

आप तय कर सकते हैं कि आप चाहते हैं कि किसी तत्व में किसी भी अतिप्रवाह सामग्री को क्लिप किया जाए, फिर उपयोगकर्ता से छिपाया जाए। यह छिपे हुए अतिप्रवाह मूल्य का उपयोग करके पूरा किया जाता है।

मान लीजिए कि आपके पास टेक्स्ट का एक बॉक्स है जिसकी सामग्री को आप छिपाना चाहते हैं यदि वे तत्व के बाहर ओवरफ्लो हो जाते हैं। इस बॉक्स को बनाने के लिए आप निम्न कोड का उपयोग कर सकते हैं:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "hidden".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: hidden;
}

हमारा कोड लौटाता है:

[Code result here]

हमारे पिछले उदाहरणों के विपरीत, हमारे बॉक्स से अतिप्रवाहित पाठ उपयोगकर्ता से छिपा हुआ है। ऐसा इसलिए है क्योंकि हम ओवरफ्लो प्रॉपर्टी का मान hidden . पर सेट करते हैं हमारे कोड में।

अतिप्रवाह-एक्स और अतिप्रवाह-वाई

अतिप्रवाह-एक्स और अतिप्रवाह-वाई गुण आपको यह बदलने की अनुमति देते हैं कि प्रत्येक अक्ष पर सामग्री के अतिप्रवाह को व्यक्तिगत रूप से कैसे नियंत्रित किया जाता है।

ओवरफ्लो-एक्स प्रॉपर्टी निर्दिष्ट करती है कि बॉक्स के बाएं और दाएं किनारों पर ओवरफ्लो को कैसे संभाला जाना चाहिए, और ओवरफ्लो-वाई प्रॉपर्टी निर्दिष्ट करती है कि बॉक्स के ऊपरी और निचले किनारों पर ओवरफ्लो को कैसे संभाला जाना चाहिए।

मान लीजिए कि आप एक बॉक्स डिज़ाइन कर रहे हैं और आप x और y-अक्ष के लिए दो अलग-अलग ओवरफ़्लो मान सेट करना चाहते हैं। x-अक्ष को hidden . का उपयोग करना चाहिए अतिप्रवाह मान, और y-अक्ष को scroll . का उपयोग करना चाहिए अतिप्रवाह मूल्य। आप इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS x-overflow and y-overflow properties to set overflow values for the individual axes in a web element.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: vertical;
}

हमारा कोड लौटाता है:

[Code result here]

जैसा कि आप देख सकते हैं, हमारे बॉक्स में कोई क्षैतिज स्क्रॉल बार नहीं है। ऐसा इसलिए है क्योंकि हमने ओवरफ्लो-एक्स का मान "छिपा" पर सेट किया है। हालांकि, हमारे बॉक्स में एक लंबवत स्क्रॉल बार है, जो प्रकट होता है क्योंकि हम ओवरफ्लो-वाई का मान "स्क्रॉल" पर सेट करते हैं।

निष्कर्ष

CSS अतिप्रवाह गुण निर्दिष्ट करता है कि किसी तत्व की सामग्री कैसे दिखाई देनी चाहिए यदि तत्व की सामग्री वेब पेज पर निर्दिष्ट क्षेत्र में फिट होने के लिए बहुत बड़ी है।

इस ट्यूटोरियल ने कुछ उदाहरणों के संदर्भ में, वेब तत्वों में अतिप्रवाह को नियंत्रित करने के लिए सीएसएस अतिप्रवाह संपत्ति और इसके चार मूल्यों का उपयोग कैसे करें, इसका पता लगाया। अब आप एक विशेषज्ञ डेवलपर की तरह CSS ओवरफ़्लो प्रॉपर्टी का उपयोग शुरू करने के लिए तैयार हैं।