CSS में एक नई लाइन पर टेक्स्ट कैसे रैप करें

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

लेकिन यहां एक अच्छी खबर है: आप ऐसे लंबे टेक्स्ट को CSS का उपयोग करके एक नई लाइन पर लपेटकर डील कर सकते हैं। यहां हम आपको दिखाएंगे कि कैसे सीएसएस के साथ लंबे, अखंड टेक्स्ट को लपेटना है।

CSS टेक्स्ट रैप कैसे काम करता है

सीएसएस इनबिल्ट का उपयोग करके लंबे शब्दों को हैंडल करता है वर्ड रैप या अतिप्रवाह-लपेटना संपत्ति।

इंस्टाग्राम पीसी पर संदेशों की जांच कैसे करें

हालांकि, जब नियंत्रित नहीं किया जाता है, तो ब्राउज़र डिफ़ॉल्ट रूप से ऐसे लंबे टेक्स्ट को हैंडल करते हैं। जब तक उन्हें ऐसा करने का निर्देश प्राप्त नहीं हो जाता, तब तक वे लंबे शब्द नहीं लपेटेंगे।

सम्बंधित: डोम के बारे में आपको क्या जानना चाहिए

पहले बताए गए दो प्रमुख CSS गुण एक ही तरह से काम करते हैं और आप उनका परस्पर उपयोग कर सकते हैं। हालांकि, वे चार मान या सिंटैक्स स्वीकार करते हैं:

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

सीएसएस वर्ड रैप का उपयोग करके लंबे शब्दों को कैसे लपेटें?

सीएसएस के साथ शब्दों को एक नई लाइन में लपेटना आसान है और काम करने के लिए बोझिल सीएसएस ट्वीक की आवश्यकता नहीं है।

उदाहरण के लिए, लंबा एच 2 नीचे दी गई नमूना छवि में पाठ कंटेनर के भीतर पाठ सीमा रेखा को पार करता है:

आइए देखें कि हम इसे का उपयोग करके अगली पंक्ति में कैसे लपेट सकते हैं वर्ड रैप सीएसएस संपत्ति:

एचटीएमएल :

  
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

सीएसएस :

.wrap-it{  
word-wrap: break-word;  
}

लंबा लपेटने के बाद एच 2 नमूना छवि में पाठ, यहाँ आउटपुट है:

इतना ही! अब आप जानते हैं कि CSS का उपयोग करके अपने DOM के भीतर शब्दों को एक नई पंक्ति में कैसे लपेटा जाता है।

स्विच पर नेटफ्लिक्स कैसे प्राप्त करें

संबंधित: सीएसएस चयनकर्ताओं का उपयोग करके वेब पेज के हिस्से को कैसे लक्षित करें

हालाँकि, जैसा कि पहले कहा गया है, वर्ड रैप तथा अतिप्रवाह-रैप उसी तरह काम करें और समान गुणों को स्वीकार करें।

काम में लाना अतिप्रवाह-रैप इसके बजाय, बस बदलें वर्ड रैप इसके साथ।

वेब पेज पर शब्दों को लपेटना महत्वपूर्ण है

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

इसलिए, DOM को बरकरार रखने के लिए ऐसे सेक्शन में टेक्स्ट रैप लागू करना आवश्यक है।

सेल फ़ोन नंबर का उपयोग करके टेबलेट से पाठ

साझा करना साझा करना कलरव ईमेल उत्तरदायी वेबसाइट बनाने के लिए HTML और CSS में मीडिया प्रश्नों का उपयोग कैसे करें

मोबाइल उपकरणों पर अपनी वेबसाइट को अद्भुत दिखाना चाहते हैं? यह सीखने का समय है कि CSS में मीडिया प्रश्नों का उपयोग कैसे किया जाता है।

आगे पढ़िए संबंधित विषय

प्रोग्रामिंग
सीएसएस
दस्तावेज़ वस्तु मॉडल

लेखक के बारे में इडिसौ ओमिसोला(94 लेख प्रकाशित)

Idowu कुछ भी स्मार्ट तकनीक और उत्पादकता के बारे में भावुक है। अपने खाली समय में, वह कोडिंग के साथ खेलता है और जब वह ऊब जाता है तो शतरंज की बिसात पर चला जाता है, लेकिन उसे कभी-कभी दिनचर्या से अलग होना भी पसंद होता है। लोगों को आधुनिक तकनीक के बारे में बताने का उनका जुनून उन्हें और अधिक लिखने के लिए प्रेरित करता है।

Idowu Omisola . की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें