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