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