HTML और CSS के साथ डिफ़ॉल्ट टेक्स्ट रैपिंग कैसे बदलें

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

रैपिंग कुछ ब्राउज़र कई कारकों पर विचार करते हैं, जैसे कि पाठ की भाषा या विराम चिह्न और रिक्त स्थान की नियुक्ति-वे बस नीचे धक्का मत करो पाठ सामग्री के लिए परिभाषित बॉक्स में क्या फिट नहीं है.

लपेटने के अलावा, ब्राउज़र भी रिक्त स्थान का ध्यान रखें; वे स्रोत कोड में कई निरंतर स्थानों को एक ही स्थान पर एक ही स्थान पर विलय कर देते हैं, और वे रैपिंग पर काम शुरू करने से पहले मजबूर लाइन ब्रेक को पंजीकृत करते हैं।.

डिफ़ॉल्ट टेक्स्ट रैपिंग को कब बदलना है

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

यह भी हो सकता है कि हम सिर्फ हताश हों हमारे पाठ में संरक्षित उन स्थानों की आवश्यकता है, हालाँकि, ब्राउज़र उन्हें एक में जोड़कर रखता है, हमें कई जोड़ने के लिए मजबूर करता है स्रोत कोड में.

रैपिंग वरीयताएँ भी हो सकती हैं पाठ की भाषा और उद्देश्य के साथ परिवर्तन. एक मंदारिन समाचार लेख और एक फ्रांसीसी कविता को ठीक उसी तरह से लपेटने की आवश्यकता नहीं है.

सीएसएस गुणों (और HTML तत्वों!) की एक उचित संख्या हो सकती है रैपिंग और ब्रेकप्वाइंट को नियंत्रित करें और भी रैप करने से पहले रिक्त स्थान और लाइन ब्रेक कैसे संसाधित होते हैं, इसे परिभाषित करें.

सॉफ्ट रैप के अवसर और सॉफ्ट रैप ब्रेक

ब्राउज़र्स तय करते हैं कि एक अतिप्रवाहित पाठ को कहां लपेटना है शब्द सीमा, हाइफ़न, शब्दांश, विराम चिह्न, स्थान और बहुत कुछ पर निर्भर करता है. ये स्थान सभी कहलाते हैं मुलायम लपेटें अवसर और जब ब्राउज़र ऐसी जगह पर पाठ को तोड़ता है, तो ब्रेक को कहा जाता है नरम लपेटो ब्रेक.

सबसे सरल तरीका है एक अतिरिक्त ब्रेक मजबूर अच्छे पुराने का उपयोग करके किया जा सकता है
तत्त्व.

श्वेत रिक्ति

यदि आप परिचित हैं सफेद-अंतरिक्ष सीएसएस संपत्ति मैं शर्त लगाता हूं कि आप इसे पहली बार उसी तरह से जानते हैं जैसे कई अन्य; रास्ता खोजते समय पाठ के आवरण को रोकने के. nowrap का मूल्य सफेद-अंतरिक्ष ठीक वैसा ही करता है.

हालांकि सफेद-अंतरिक्ष संपत्ति केवल लपेटने से अधिक है। सबसे पहले, व्हाट्सएप क्या है? यह है अंतरिक्ष पात्रों का सेट. सेट में प्रत्येक स्थान एक दूसरे से भिन्न होता है लंबाई, दिशा, या दोनों में.

एक ठेठ एकल क्षैतिज अंतरिक्ष चरित्र स्पेसबार की को दबाकर हम जोडते हैं। टैब कुंजी भी एक कहते हैं समान स्थान लेकिन बड़ी लंबाई के साथ. एंटर कुंजी एक कहते हैं ऊर्ध्वाधर स्थान एक नई लाइन शुरू करने के लिए, और में HTML एक कहते हैं एकल अटूट स्थान वेब पृष्ठों के लिए। इस तरह, बहुत सारे प्रकार के स्थान हैं जो गठित होते हैं “खाली स्थान के”.

जैसा कि मैंने शुरुआत में बताया था कि ब्राउज़र कई रिक्त स्थान ढहते हैं (दोनों क्षैतिज और ऊर्ध्वाधर) स्रोत में एक एकल स्थान में। वे भी अवसरों को लपेटने के लिए इन अंतरिक्ष पात्रों पर विचार करें (वे स्थान जहाँ पाठ लपेटा जा सकता है) जब लपेटने की आवश्यकता हो.

और, यह इन ब्राउज़र क्रियाओं के साथ ठीक है जिसे हम नियंत्रित कर सकते हैं सफेद-अंतरिक्ष. ध्यान दें कि सफेद-अंतरिक्ष संपत्ति सभी प्रकार के स्थान को प्रभावित नहीं करती है, बस सबसे लगातार जैसे नियमित क्षैतिज एकल स्थान, टैब स्थान, और पंक्ति फ़ीड.

नीचे, आप एक नमूना पाठ का स्क्रीनशॉट देख सकते हैं अपने कंटेनर के अंदर फिट करने के लिए ब्राउज़र द्वारा लिपटा हुआ. ओवरफ्लो कंटेनर के नीचे होता है और ओवरफ्लो टेक्स्ट अलग-अलग रंग का होता है। आप नोटिस करेंगे लगातार रिक्त स्थान का पतन कोड में.

 
 ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्कार â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते. 

 .textContainer चौड़ाई: 500px; ऊंचाई: 320 पीएक्स;  

आवेदन करने के बाद श्वेत-स्थान: Nowrap; नियम, पाठ का रैपिंग निम्न तरीके से बदलता है:

 .textContainer / *… * / व्हाइट-स्पेस: nowrap;  

पूर्व का मूल्य सफेद-अंतरिक्ष सभी व्हाट्सएप को सुरक्षित रखता है तथा पाठ के रैपिंग को रोकता है:

 .textContainer / *… * / व्हाइट-स्पेस: प्री;  

pre-wrap का मूल्य सफेद-अंतरिक्ष सभी व्हाट्सएप को सुरक्षित रखता है तथा पाठ लपेटता है:

 .textContainer / *… * / सफेद-स्थान: पूर्व-लपेट;  

अंततः पूर्व लाइन का मूल्य सफेद-अंतरिक्ष ऊर्ध्वाधर व्हाट्सएप को संरक्षित करता है जैसे नई लाइनें और पाठ लपेटता है:

 .textContainer / *… * / श्वेत-स्थान: पूर्व-पंक्ति;  

शब्द टूटता है

एक अन्य महत्वपूर्ण सीएसएस संपत्ति जिसे आपको टेक्स्ट रैप को नियंत्रित करने के लिए पता होना चाहिए शब्द-तोड़. आप उपरोक्त सभी स्क्रीनशॉट में देख सकते हैं कि ब्राउज़र शब्द से पहले पाठ लपेटा “नमस्ते” दाईं ओर, जिसके आगे पाठ बह निकला. ब्राउज़र शब्द नहीं तोड़ा.

हालाँकि, यदि आप यह करना है एक शब्द में अक्षरों को तोड़ने की अनुमति दें इतना है कि पाठ सही पक्ष पर भी आप का उपयोग करने की आवश्यकता होगी पर दिखेगा सब तोड़ना के लिए मूल्य शब्द-तोड़ संपत्ति:

 .textContainer / *… * / शब्द-विराम: ब्रेक-ऑल;  

शब्द-तोड़ संपत्ति के अलावा एक तीसरा मूल्य है सब तोड़ना तथा साधारण (डिफ़ॉल्ट लाइन ब्रेकिंग से संबंधित)। सभी रखना मूल्य शब्दों को तोड़ने की अनुमति नहीं देता है.

आप के प्रभाव को देखने में सक्षम नहीं हो सकता है सभी रखना अंग्रेजी में। लेकिन, ऐसी भाषाओं में जहां एक शब्द में अक्षर होते हैं अपने दम पर सार्थक इकाइयाँ, ब्राउज़र लपेटते समय शब्दों को तोड़ सकता है, और इसका उपयोग करने से रोका जा सकता है सभी रखना.

उदाहरण के लिए, कोरियाई शब्दों में पत्र, शुरू में लपेटने के लिए टूट गया, एक साथ रखे जाते हैं जब व्हाइट-स्पेस: कीप-ऑल; नियम निर्दिष्ट है.

ए¬Â ?? ¸एªए³Â हैं ?? एक «Â¥ए¼ A-ए-ए¥ए-ए ??  ?? à «Â ??  ?? Ã- ?? ??, ìà ??  à «Â ?? ?? ìए½Â ?? «एक ??  हैं ?? एक« ¡ए?? ए-ए ??  हैं ?? एक¬Â ?? ए-ए¬Â ??  हैं ?? एक¬Â ?? ¤. ए¬10 10 ?? 10 एक- ?? 10 ?? ए¬Ã ??  à «Â ?? ?? ìए½Â हैं ?? एक «Â ??  ?? एªएµए-ए¬Â  ?? ए-ए ??  हैं ?? एक¬Â ??  हैं ?? एकªÂ °  ?? 1997 एक «Ã…  ?? 3 ए¬Â ??  ?? 10:00 पूर्वाह्न¬Â ?? ¼A «Â¶Â ?? Ã- ??  ° 12ì ?? ¼एªए¹Â हैं ?? एक¬ए§ए?? à «Â ?? Â… ì ?? ¼ए¬Â ??  ?? A «Â§Â हैं ?? एक¬Â ?? ¸ए¬ए¦Â हैं ?? एक¬ए-ए ?? एक¬Â ??  ?? ए¬ए-ए´A «Â¦ए½A «Â ??  हैं ?? एक«  ?? ¤. ए¬ए§Â हैं ?? एकªए¸ए?? A «Â ??  ± a« ¡ ?? ए-ए ??  हैं ?? एक¬Â ?? ए-ए¬Â ??  हैं ?? एक¬Â ?? ¤. ए¬Â ?? ´ ए-ए ??  हैं ?? एक¬Â ??  हैं ?? एक¬ए-ए ?? एक¬Â ??  हैं ?? एक «Â ??  ?? ए¬Â-Â… êए³ए?? ए¬Ã  ?? à «Â ° ?? ì ??  ?? ए¬Ã  ?? à «¬ए¸एªÂ °  हैं ?? एक «Â ?? ¤ए¬Â ?? ´ ए-ए ?? ¨एªÂ »Â ?? A «Âªए¨ए¬ए-ए¬ A «Â ?? ¤ए¬Â ??  हैं ?? एकªए³ए¼ एªÂ °  हैं ?? एक¬Â ??  ?? A «Â¶Â हैं ?? एक¬Â ?? ¼A «Â¥ए¼ A «Â ?? ¤A «Â £ ¹A «Â ??  हैं ?? एक«  ?? ¤.

 .textContainer / *… * / शब्द-विराम: Keep-all;  

यह प्रॉपर्टी नामक एक अन्य मूल्य का समर्थन कर सकता है ब्रेक-शब्द भविष्य में। आप देखेंगे कि कैसे ब्रेक-शब्द बाद में काम करता है, में “ओवरफ्लो रैप” इस लेख का खंड.

वर्ड ब्रेक के अवसर

डेवलपर्स भी कर सकते हैं शब्दों के अंदर रैप के अवसर जोड़ें, का उपयोग करते हुए HTML तत्व। यदि किसी ब्राउज़र को टेक्स्ट स्ट्रिंग को लपेटने की आवश्यकता होती है, तो यह उस स्थान पर विचार करेगा जहां एक लपेटन अवसर के लिए मौजूद है.

 
 ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? एचएलो â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते। ए¢Â ??  ?? नमस्ते. 
 

 .textContainer / *… * / सफेद-स्थान: पूर्व-लपेट;  

के बिना , पूरा “नमस्ते” शब्द को एक नई पंक्ति में प्रस्तुत किया गया होगा। जोड़ कर HTML कोड के लिए, हमने उस ब्राउज़र को सूचित किया है रैपिंग के लिए उस बिंदु पर शब्द को तोड़ना ठीक है, अगर यह आवश्यक है.

हाइफ़न

हाइफ़न सीएसएस संपत्ति है अक्षरों के बीच विराम को नियंत्रित करने का दूसरा तरीका एक शब्द में। यदि आप रुचि रखते हैं तो हमारे पास CSS हाइफ़नेशन पर एक अलग लेख है। संक्षेप में, संपत्ति आपको अनुमति देती है हाइफ़नेशन के माध्यम से रैपिंग के अवसर पैदा करना.

आईटी इस ऑटो मूल्य ब्राउज़र को संकेत देता है स्वचालित रूप से हाइफ़ेनेट और जहां आवश्यक हो शब्दों को तोड़ें लपेटते समय। गाइड मान ब्राउज़र को मजबूर करता है हमारे द्वारा जोड़े गए हाइफ़नेशन अवसरों पर रैप (यदि आवश्यक हो), जैसे कि हाइफन कैरेक्टर (‐) या ­ (सॉफ्ट हाइफ़न)। अगर कोई नहीं मूल्य के रूप में दिया गया था हाइफ़न के पास कोई रैपिंग नहीं.

 
 ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस ब्लूहाउस 
 

 .textContainer / * ... * / -webkit-hyphens: ऑटो; -ms-hyphens: ऑटो; हाइफ़न: ऑटो;  

ओवरफ्लो रैप

ओवरफ़्लो- चादर सीएसएस संपत्ति नियंत्रित करता है अगर ए ब्राउज़र शब्दों को तोड़ सकता है (या संरक्षित स्थान, जिसके लिए निकट भविष्य में हो सकता है समर्थन) अतिप्रवाह पर. जब ब्रेक-शब्द के लिए मूल्य दिया जाता है ओवरफ़्लो- चादर, शब्द तोड़ा जाएगा यदि कोई अन्य नरम आवरण अवसर नहीं मिलते हैं कतार में.

ध्यान दें कि ओवरफ़्लो- चादर के रूप में भी जाना जाता है वर्ड रैप (वे उपनाम हैं).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / अतिप्रवाह-लपेट: ब्रेक-वर्ड;  

एचटीएमएल कोड में अक्षरों के बीच में कोई स्थान नहीं है (यानी कोई रैपिंग के अवसर नहीं), पहले और बाद में पाठ लपेटा नहीं गया था एक शब्द के रूप में संरक्षित किया गया था.

हालांकि, जब शब्दों को तोड़कर पाठ को लपेटने की अनुमति दी गई थी (अर्थात ब्रेक-शब्द मूल्य दिया गया था ओवरफ़्लो- चादर), द रैपिंग पूरी स्ट्रिंग को तोड़कर हुई जहां भी जरूरी था.