सीएसएस और एचटीएमएल का उपयोग कर स्क्रॉलिंग पाठ के साथ एक बॉक्स बनाएँ
एक HTML स्क्रॉल बॉक्स एक बॉक्स है जो बॉक्स की सामग्री बॉक्स आयामों से बड़ा होने पर स्क्रॉल बार को दाएं तरफ और नीचे जोड़ता है। दूसरे शब्दों में, यदि आपके पास एक बॉक्स है जो लगभग 50 शब्दों में फिट हो सकता है, और आपके पास 200 शब्दों का पाठ है, तो एक HTML स्क्रॉल बॉक्स आपको अतिरिक्त 150 शब्दों को देखने के लिए स्क्रॉल बार लगाएगा। मानक एचटीएमएल में जो बस बॉक्स के बाहर अतिरिक्त पाठ को दबाएगा।
HTML स्क्रॉल बनाना काफी आसान है। आपको केवल उस तत्व की चौड़ाई और ऊंचाई सेट करने की आवश्यकता है जिसे आप स्क्रॉल करना चाहते हैं और उसके बाद स्क्रॉलिंग होने के तरीके को सेट करने के लिए सीएसएस ओवरफ्लो प्रॉपर्टी का उपयोग करें।
अतिरिक्त पाठ के साथ क्या करना है?
जब आपके लेआउट पर स्थान में फ़िट होने से अधिक टेक्स्ट होता है, तो आपके पास कुछ विकल्प होते हैं:
- टेक्स्ट को फिर से लिखें ताकि यह छोटा हो और फिट हो जाए।
- पाठ को सीमाओं से आगे बहने दें और उम्मीद करें कि लेआउट इसका समर्थन करने के लिए फ्लेक्स कर सकता है।
- उस पाठ को काट दें जहां यह बहती है।
- स्क्रॉल बार जोड़ें (आमतौर पर पाठ के लिए लंबवत) ताकि स्पेस स्क्रॉल अतिरिक्त टेक्स्ट दिखाए।
सबसे अच्छा विकल्प आमतौर पर अंतिम विकल्प होता है: स्क्रॉलिंग टेक्स्ट बॉक्स बनाएं। फिर अतिरिक्त पाठ अभी भी पढ़ा जा सकता है, लेकिन आपके डिज़ाइन से समझौता नहीं किया गया है।
इसके लिए एचटीएमएल और सीएसएस होगा:
अतिप्रवाह: ऑटो; ब्राउजर को स्क्रॉल बार जोड़ने के लिए कहता है अगर उन्हें पाठ की सीमाओं को बहने से टेक्स्ट रखने के लिए जरूरी है। लेकिन इसके लिए काम करने के लिए, आपको div पर सेट चौड़ाई और ऊंचाई शैली गुणों की भी आवश्यकता है, ताकि ओवरफ्लो की सीमाएं हों।
आप ओवरफ्लो को बदलकर टेक्स्ट को भी काट सकते हैं: ऑटो; अतिप्रवाह करने के लिए: छुपा; यदि आप अतिप्रवाह संपत्ति छोड़ देते हैं, तो पाठ div की सीमाओं पर फैल जाएगा।
आप बस पाठ से अधिक स्क्रॉल बार्स जोड़ सकते हैं
यदि आपके पास एक बड़ी छवि है जिसे आप एक छोटी सी जगह में प्रदर्शित करना चाहते हैं, तो आप टेक्स्ट के साथ उसी तरह स्क्रॉल बार जोड़ सकते हैं।
<पी शैली = "ओवरफ्लो: ऑटो; चौड़ाई: 300 पीएक्स; ऊंचाई: 300 पीएक्स;">इस उदाहरण में, 400x50 9 छवि 300x300 पैराग्राफ के अंदर है।
टेबल्स स्क्रॉल बार्स से लाभ उठा सकते हैं
जानकारी की लंबी तालिकाओं को बहुत जल्दी पढ़ने में बहुत मुश्किल हो सकती है, लेकिन उन्हें सीमित आकार के एक div के अंदर डालकर और ओवरफ्लो प्रॉपर्टी जोड़कर, आप बहुत सारे डेटा के साथ तालिकाओं को उत्पन्न कर सकते हैं जो आपके पृष्ठ पर चरम स्थान नहीं लेते हैं ।
सबसे आसान तरीका छवियों और पाठों की तरह ही है, बस तालिका के चारों ओर एक div जोड़ें, उस div की चौड़ाई और ऊंचाई सेट करें, और ओवरफ़्लो गुण जोड़ें:
| नाम <वें> फ़ोन | ||||
|---|---|---|---|---|
| जेनिफर | 502-5366 .... एक चीज जो तब होती है जब आप ऐसा करते हैं तो एक क्षैतिज स्क्रॉल बार आमतौर पर प्रकट होता है क्योंकि ब्राउज़र मानता है कि स्क्रॉल बार का क्रोम तालिका को ओवरलैप कर रहा है। तालिका और अन्य की चौड़ाई को बदलने से इसे ठीक करने के कई तरीके हैं। लेकिन मेरा पसंदीदा सीएसएस 3 प्रॉपर्टी ओवरफ्लो-एक्स के साथ क्षैतिज स्क्रॉलिंग को बंद करना है। बस अतिप्रवाह-एक्स जोड़ें: छुपा; div के लिए, और वह क्षैतिज स्क्रॉल बार को हटा देगा। इसका परीक्षण करना सुनिश्चित करें, क्योंकि गायब होने वाली सामग्री हो सकती है। फ़ायरफ़ॉक्स ओवरफ़्लो के लिए TBODY टैग का उपयोग करने का समर्थन करता हैफ़ायरफ़ॉक्स ब्राउज़र की एक बहुत अच्छी सुविधा यह है कि आप ओवरफ़्लो प्रॉपर्टी का उपयोग आंतरिक टेबल टैग जैसे टैब और थैड या टीफुट पर कर सकते हैं। इसका मतलब है कि आप टेबल सामग्री पर स्क्रॉल बार सेट कर सकते हैं, और हेडर सेल उनके ऊपर लगी रहती हैं। यह केवल फ़ायरफ़ॉक्स में काम करता है, जो बहुत खराब है, लेकिन यदि आपके पाठक केवल फ़ायरफ़ॉक्स का उपयोग करते हैं तो यह एक अच्छी सुविधा है। फ़ायरफ़ॉक्स में इस उदाहरण को ब्राउज़ करें कि मेरा क्या मतलब है। <टेबल शैली = "चौड़ाई: 300 पीएक्स;"> नाम <वें> फ़ोन | जेनिफर | 502-5366 ...
| |