फ़ायरफ़ॉक्स में टेक्स्ट-ओवरफ़्लो और सब कुछ, सब कुछ, सब कुछ

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

इंटरनेट एक्सप्लोरर के साथ, सब कुछ स्पष्ट है, अन्य ब्राउज़रों के बारे में क्या? हालाँकि पाठ-अतिप्रवाह संपत्ति को वर्तमान में CSS3 विनिर्देश से बाहर रखा गया है, लेकिन सफारी इसे (कम से कम संस्करण 3 में), ओपेरा भी (संस्करण 9 के बाद से, सत्य को -o- अतिप्रवाह-पाठ संपत्ति कहा जाता है) का समर्थन करता है। और फ़ायरफ़ॉक्स - नहीं, यह इसका समर्थन नहीं करता है, और यहां तक ​​कि तीसरे संस्करण में भी यह नहीं जीता है। दुख की बात है लेकिन सच है। लेकिन क्या आप कुछ कर सकते हैं?







बेशक, आप यह कर सकते हैं। जब मैंने इस संपत्ति के बारे में इंटरनेट पर खोज की, और फ़ायरफ़ॉक्स के साथ, मैं एक सरल समाधान के साथ एक लेख में आया। समाधान का सार:

1. अधिकतम-चौड़ाई या केवल चौड़ाई के माध्यम से ब्लॉक को चौड़ाई से सीमित करें।
2. उपयोग करने के बाद :: हम ऑटो-जेनरेट की गई सामग्री बनाते हैं जिसमें एक दीर्घवृत्त (तीन बिंदु) होते हैं।

वह सब है। लेख में विवरण पढ़ें।

समाधान बुरा नहीं है, लेकिन समस्याएं हैं:

1. पत्र के मध्य (अपेक्षाकृत बोलने) में पाठ काटा जा सकता है, और हम इसका "स्टंप" देखेंगे।
2. दीर्घवृत्त हमेशा प्रदर्शित होता है, तब भी जब पाठ ब्लॉक की चौड़ाई से कम होता है (अर्थात यह ब्लॉक से बाहर नहीं निकलता है और दीर्घवृत्त की आवश्यकता नहीं होती है)।

पहला कदम

इसके साथ शुरू करने के लिए, हम दूसरी समस्या पर ध्यान केंद्रित करते हैं, अर्थात्, जब यह आवश्यक नहीं है, तो एलिप्स के प्रदर्शन से कैसे बचा जाए। उसके सिर को तोड़कर "थोड़ा" प्रयोग करने पर, मुझे कुछ समाधान मिला। मैं समझाने की कोशिश करूंगा।

लब्बोलुआब यह है कि हमें एक दीर्घवृत्त के साथ एक अलग ब्लॉक की आवश्यकता है, जो केवल तब दिखाई देगा जब पाठ चौड़ाई में बहुत अधिक जगह लेता है। फिर मैं एक गिरते तैरते ब्लॉक के विचार के साथ आया। यद्यपि यह डरावना लगता है, इसका मतलब सिर्फ एक ब्लॉक है, जो हमेशा होता है, और दाईं ओर दबाया जाता है, लेकिन जब पाठ की चौड़ाई बड़ी हो जाती है, तो पाठ ब्लॉक को अगली पंक्ति में धकेल देता है।

चलो अभ्यास करने के लिए आगे बढ़ें, अन्यथा यह समझाना कठिन है। HTML संरचना सेट करें:

     <div class = "ellipsis">
       <div> बहुत लंबा पाठ </ div>
       <div> </ div>
     </ Div>

बहुत कॉम्पैक्ट नहीं है, लेकिन छोटा मैं सफल नहीं हुआ। तो, हमारे पास एक ब्लॉक कंटेनर DIV.ellipsis है, हमारे पाठ के साथ एक ब्लॉक और एक अन्य ब्लॉक जिसमें एक दीर्घवृत्त शामिल होगा। ध्यान दें कि "दीर्घवृत्त ब्लॉक" वास्तव में खाली है, क्योंकि हमें पाठ की प्रतिलिपि बनाते समय अतिरिक्त तीन बिंदुओं की आवश्यकता नहीं है। इसके अलावा, अतिरिक्त कक्षाओं की अनुपस्थिति से डरो मत, क्योंकि यह संरचना अच्छी तरह से सीएसएस चयनकर्ताओं के माध्यम से संबोधित की जाती है। और यहाँ CSS ही है:

     .ellipsis
     {
       अतिप्रवाह: छिपा हुआ;
       श्वेत-स्थान: Nowrap;
       लाइन-ऊँचाई: 1.2em;
       ऊंचाई: 1.2em;
       सीमा: 1px ठोस लाल;
     }

     .ellipsis> DIV: पहला बच्चा
     {
       फ्लोट: बाएं;
     }
     .ellipsis> DIV + DIV
     {
       फ्लोट: सही;
       मार्जिन-टॉप: -1.2em;
     }
     .ellipsis> DIV + DIV :: के बाद
     {
       पृष्ठभूमि-रंग: सफेद;
       सामग्री: '...';
     }

वह सब है। हम जाँच और सुनिश्चित करें कि फ़ायरफ़ॉक्स, ओपेरा, सफारी के रूप में काम करता है। आईई में, एक बहुत ही अजीब, लेकिन अनुमानित, परिणाम। IE6 में, सब कुछ चला गया, लेकिन IE7 में यह सिर्फ काम नहीं करता है, क्योंकि यह उत्पन्न सामग्री का समर्थन नहीं करता है। लेकिन हम IE पर लौट आएंगे।



इस बीच, हम विश्लेषण करेंगे कि क्या किया गया था। सबसे पहले, हम मुख्य ब्लॉक की लाइन-ऊंचाई और ऊंचाई निर्धारित करते हैं, क्योंकि हमें ब्लॉक की ऊंचाई और टेक्स्ट लाइन की ऊंचाई जानने की जरूरत है। हम समान-शीर्ष ब्लॉक के लिए एक हीलिप्सिस के साथ एक ही मान सेट करते हैं, लेकिन एक नकारात्मक मूल्य के साथ। इस प्रकार, जब ब्लॉक अगली पंक्ति में "गिराया" नहीं जाता है, तो यह पाठ की रेखा (एक पंक्ति) से ऊपर होगा, जब इसे रीसेट किया जाता है तो यह अपने स्तर पर होगा (वास्तव में, यह कम है, हम बस एक पंक्ति को ऊपर खींचते हैं)। अनावश्यक छिपाने के लिए, खासकर जब आपको दीर्घवृत्त दिखाने की आवश्यकता नहीं होती है, हम अतिप्रवाह करते हैं: मुख्य ब्लॉक के लिए छिपा हुआ है, इसलिए जब दीर्घवृत्त लाइन के ऊपर होता है, तो यह नहीं दिखाया जाएगा। यह हमें ब्लॉक (दाईं ओर) के बाहर आने वाले पाठ को हटाने की भी अनुमति देता है। ताकि पाठ अचानक लपेट न जाए और ब्लॉक को दीर्घवृत्त और निचले हिस्से के साथ धक्का दे, हम श्वेत-स्थान करते हैं: नॉव्रेप, जिससे हाइफ़न को रोकना - हमारा पाठ हमेशा एक पंक्ति में होगा। पाठ के साथ ब्लॉक के लिए, हम फ्लोट सेट करते हैं: बाएं ताकि यह ब्लॉक को इलिप्सिस के साथ तुरंत डंप न करे और न्यूनतम चौड़ाई पर कब्जा कर ले। चूंकि दोनों ब्लॉक मुख्य ब्लॉक (DIV.ellipsis) के अंदर फ्लोट (बाएं / दाएं) चल रहे हैं, पाठ के साथ ब्लॉक खाली होने पर मुख्य ब्लॉक टूट जाएगा, इसलिए मुख्य ब्लॉक के लिए हम एक निश्चित ऊंचाई (ऊंचाई: 1.2em) निर्धारित करते हैं। और अंत में, हम दीर्घवृत्त-तत्व का उपयोग करते हैं :: दीर्घवृत्त प्रदर्शित करने के बाद। इस छद्म तत्व के लिए, हम इसके अंतर्गत आने वाले पाठ को ओवरलैप करने के लिए पृष्ठभूमि भी सेट करते हैं। हम मुख्य इकाई के लिए फ्रेम सेट करते हैं, केवल इकाई के आयामों को देखने के लिए, बाद में हम इसे हटा देंगे।

यदि फ़ायरफ़ॉक्स, ओपेरा और सफारी के रूप में अच्छी तरह से छद्म तत्वों का समर्थन करता है, तो उनकी स्थिति (उनके लिए नौकरी / स्थिति आदि) के संदर्भ में, तो यह संभव होगा कि दीर्घवृत्त के लिए एक अलग ब्लॉक का उपयोग न करें। निम्नलिखित के साथ अंतिम 3 नियमों को बदलने का प्रयास करें:

     .ellipsis> DIV: पहला बच्चा :: के बाद
     {
       फ्लोट: सही;
       सामग्री: '...';
       मार्जिन-टॉप: -1.2em;
       पृष्ठभूमि-रंग: सफेद;
       स्थिति: रिश्तेदार;
     }

ओपेरा और सफारी में देखें, सब कुछ पहले की तरह काम करता है, और एक दीर्घवृत्त के साथ अतिरिक्त ब्लॉक के बिना। हालाँकि, फ़ायरफ़ॉक्स एक निराशा है। लेकिन यह उसके लिए है कि हम निर्णय लें। अच्छा - आपको मूल HTML संरचना के साथ करना होगा।

दूसरा कदम

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

     .ellipsis
     {
       अतिप्रवाह: छिपा हुआ;
       श्वेत-स्थान: Nowrap;
       लाइन-ऊँचाई: 1.2em;
       ऊंचाई: 1.2em;
       सीमा: 1px ठोस लाल; 

       पाठ-अतिप्रवाह: दीर्घवृत्त;
       -ओ-पाठ-अतिप्रवाह: दीर्घवृत्त;
       चौड़ाई: 100%; 

     } 

     .लिप्सिस *
     {
       प्रदर्शन: इनलाइन;
     }

     / * 

     .ellipsis> DIV: पहला बच्चा
     {
       फ्लोट: बाएं;
     }
     .ellipsis> DIV + DIV
     {
       फ्लोट: सही;
       मार्जिन-टॉप: -1.2em;
     }
     .ellipsis> DIV + DIV :: के बाद
     {
       पृष्ठभूमि-रंग: सफेद;
       सामग्री: '...';
     } 

     * /

संपादित करें, जैसा कि यह निकला, ज्यादा नहीं। मुख्य इकाई की शैली में तीन लाइनें जोड़ी गईं। उनमें से दो पाठ-अतिप्रवाह शामिल हैं। चौड़ाई सेट करना: IE के लिए 100% आवश्यक है, ताकि पाठ अनन्तता के लिए ब्लॉक को धक्का न दे, और पाठ-अतिप्रवाह संपत्ति काम करती है; वास्तव में, हमने चौड़ाई सीमित कर दी है। सिद्धांत रूप में, DIV, सभी ब्लॉक तत्वों की तरह, कंटेनर की पूरी चौड़ाई में फैला हुआ है, और चौड़ाई: 100% बेकार है, और यहां तक ​​कि हानिकारक भी है, लेकिन IE में एक लेआउट समस्या है, क्योंकि कंटेनर हमेशा सामग्री को फिट करने के लिए खिंचा जाता है, इसलिए अन्यथा नहीं हो सकता। हमने सभी आंतरिक तत्वों को इनलाइन भी बनाया है, क्योंकि कुछ ब्राउज़रों (सफारी और ओपेरा) के लिए टेक्स्ट-ओवरफ्लो अन्यथा काम नहीं करेगा, क्योंकि अंदर ब्लॉक तत्व हैं। हमने पिछले तीन नियमों पर टिप्पणी की, क्योंकि इस मामले में उनकी जरूरत नहीं है और वे सब कुछ (संघर्ष) तोड़ देते हैं। ये नियम केवल फ़ायरफ़ॉक्स के लिए आवश्यक होंगे।

देखते हैं क्या हुआ और जारी है।

तीसरा कदम

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

     .ellipsis
     {
       अतिप्रवाह: छिपा हुआ;
       श्वेत-स्थान: Nowrap;
       लाइन-ऊँचाई: 1.2em;
       ऊंचाई: 1.2em;
       सीमा: 1px ठोस लाल;
       पाठ-अतिप्रवाह: दीर्घवृत्त;
       -ओ-पाठ-अतिप्रवाह: दीर्घवृत्त;
       चौड़ाई: 100%; 

       -मोज़-बाइंडिंग: url (moz_fix.xml # ellipsis);
       ज़ूम: 1; 

     }
     .लिप्सिस *
     {
       प्रदर्शन: इनलाइन;
     }
    

     .मोज़-एलिप्सिस> डीआईवी: पहला बच्चा 

     {
       फ्लोट: बाएं; 

       प्रदर्शन: ब्लॉक; 

     } 

     .मोज़-एलिप्सिस> डीआईवी + डीआईवी 

     {
       फ्लोट: सही;
       मार्जिन-टॉप: -1.2em; 

       प्रदर्शन: ब्लॉक; 

     } 

     .moz-ellipsis> DIV + DIV :: के बाद 

     {
       पृष्ठभूमि-रंग: सफेद;
       सामग्री: '...';
     }

जैसा कि आप देख सकते हैं, हमने फिर से कई बदलाव नहीं किए हैं। IE7 में इस कदम पर एक अजीब गड़बड़ है, अगर आप मुख्य इकाई (सबसे आसान विकल्प) के लिए ज़ूम: 1 निर्धारित नहीं करते हैं तो सब कुछ तिरछा हो जाता है। यदि आप नियम को हटाते हैं (हटाते हैं, टिप्पणी करते हैं) .ellipsis * या .moz-ellipsis> DIV + DIV (जो IE7 की चिंता बिल्कुल नहीं करता है), तो गड़बड़ गायब हो जाती है। यह सब कुछ अजीब है, अगर किसी को पता है कि मामला क्या है, तो मुझे बताएं। इस बीच, ज़ूम इन करें: 1 और फ़ायरफ़ॉक्स पर आगे बढ़ें।

-मोज़-बाइंडिंग प्रॉपर्टी में दीर्घवृत्त पहचानकर्ता के साथ moz_fix.xml निर्देश फ़ाइल शामिल है। इस xml फ़ाइल की सामग्री इस प्रकार है:

 <? xml संस्करण = "1.0"?>
 <बाइंडिंग xmlns = "http://www.mozilla.org/xbl" xmlns: html = "http://www.w3.org/1999/xhtml">

 <बाइंडिंग आईडी = "दीर्घवृत्तीयता" एप्लायथोरास्टाइल = "असत्य">
	 <कार्यान्वयन>
		 <कन्स्ट्रक्टर> <! [CDATA]
			 this.style.mozBinding = '';
			 this.className = this.className + 'moz-ellipsis';
		 ]]> </ कंस्ट्रक्टर>
	 </ कार्यान्वयन>
 </ बाइंडिंग>

 </ बाइंडिंग>

यह सब कुछ जो निर्माता करता है वह moz-ellipsis क्लास को उस एलिमेंट से जोड़ना है जिसके लिए चयनकर्ता ने काम किया है। यह केवल फ़ायरफ़ॉक्स (gecko ब्राउज़र?) में काम करेगा, इसलिए केवल इसमें moz-ellipsis वर्ग को तत्वों में जोड़ा जाएगा, और हम इस वर्ग के लिए अतिरिक्त नियम जोड़ सकते हैं। उन्होंने क्या हासिल किया। मैं इस.स्टाइल.mozBinding = '' की आवश्यकता के बारे में बिल्कुल निश्चित नहीं हूं, लेकिन अभिव्यक्ति के साथ अनुभव से इसे सुरक्षित खेलना बेहतर है (सामान्य तौर पर मैं फ़ायरफ़ॉक्स के इस पक्ष से परिचित नहीं हूं, इसलिए मुझे गलत माना जा सकता है)।

आपको चेतावनी दी जा सकती है कि यह तकनीक बाहरी फ़ाइल और आम तौर पर जावास्क्रिप्ट का उपयोग करती है। डरें नहीं। सबसे पहले, यदि फ़ाइल लोड नहीं होती है और / या जावास्क्रिप्ट अक्षम है और काम नहीं करता है, तो यह ठीक है, उपयोगकर्ता ने केवल अंत में दीर्घवृत्त नहीं देखा है, पाठ ब्लॉक के अंत में कट जाएगा। यही है, इस मामले में हमें "विनीत" समाधान मिलता है। आप अपने लिए देख सकते हैं ।



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

चौथा चरण

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

     <div class = "ellipsis"> बहुत लंबा पाठ </ div>

अरे हाँ! मुझे लगता है कि आप मुझसे सहमत होंगे - यह वही है जो आपको चाहिए!

अब चलो शैली से सभी अनावश्यक हटा दें:

     .ellipsis
     {
       अतिप्रवाह: छिपा हुआ;
       श्वेत-स्थान: Nowrap;
       लाइन-ऊँचाई: 1.2em;
       ऊंचाई: 1.2em;
       पाठ-अतिप्रवाह: दीर्घवृत्त;
       -ओ-पाठ-अतिप्रवाह: दीर्घवृत्त;
       चौड़ाई: 100%;
       -मोज़-बाइंडिंग: url (moz_fix.xml # ellipsis);
     }

     .मोज़-एलिप्सिस> डीआईवी: पहला बच्चा
     {
       फ्लोट: बाएं;
     }
     .मोज़-एलिप्सिस> डीआईवी + डीआईवी
     {
       फ्लोट: सही;
       मार्जिन-टॉप: -1.2em;
     }
     .moz-ellipsis> DIV + DIV :: के बाद
     {
       पृष्ठभूमि-रंग: सफेद;
       सामग्री: '...';
     }

हमने आखिरकार लाल फ्रेम हटा दिया :)

और अब, चलो हमारे moz_fix.xml को थोड़ा जोड़ें:

 <? xml संस्करण = "1.0"?>
 <बाइंडिंग xmlns = "http://www.mozilla.org/xbl" xmlns: html = "http://www.w3.org/1999/xhtml">

 <बाइंडिंग आईडी = "दीर्घवृत्तीयता" एप्लायथोरास्टाइल = "असत्य">
	 <कार्यान्वयन>
		 <कन्स्ट्रक्टर> <! [CDATA]
			 (फ़ंक्शन (ब्लॉक) {
				 setTimeout (फ़ंक्शन () {
					 block.style.mozBinding = '';
  					 var t = document.createElement ('DIV');
					 जबकि (block.firstChild)
				  		 t.appendChild (block.firstChild);
					 block.appendChild (t);
					 block.appendChild (document.createElement ('DIV'));
					 block.className = block.className + 'moz-ellipsis';
				 }, 0);
			 }) (यह);
		 ]]> </ कंस्ट्रक्टर>
	 </ कार्यान्वयन>
 </ बाइंडिंग>

 </ बाइंडिंग>

यहां क्या हो रहा है? हम अपनी प्रारंभिक HTML संरचना को फिर से बनाते हैं। यही है, ब्लॉक के साथ उन कठिनाइयों को स्वचालित रूप से किया जाता है, और केवल फ़ायरफ़ॉक्स में। जावास्क्रिप्ट कोड सबसे अच्छी परंपरा में लिखा है :)

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

     .मोज़-एलिप्सिस> डीआईवी: पहला बच्चा
     {
       फ्लोट: बाएं; 

       मार्जिन-राइट: -26 पीएक्स; 

     }
     .मोज़-एलिप्सिस> डीआईवी + डीआईवी
     {
       फ्लोट: सही;
       मार्जिन-टॉप: -1.2em; 

       पृष्ठभूमि: url (ellipsis.png) रिपीट-वाई;
       पैडिंग-लेफ्ट: 26 पीएक्स; 

     }

हम जीवन को देखते हैं और आनंद लेते हैं।



इस पर और एक अंत डाल दिया।

निष्कर्ष

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

सामान्य तौर पर, इस समाधान को केवल खिंचाव के साथ सार्वभौमिक कहा जा सकता है। यह सब आपके लेआउट और इसकी जटिलता पर निर्भर करता है। आपको एक फ़ाइल, या शायद एक टैम्बोरिन की आवश्यकता हो सकती है। हालांकि ज्यादातर मामलों में, मुझे लगता है कि यह काम करेगा। और फिर, अब आपके पास एक प्रारंभिक बिंदु है;)

मुझे उम्मीद है कि आपने लेख से कुछ दिलचस्प और उपयोगी सीखा;) जानें, प्रयोग करें, साझा करें।

सौभाग्य है