लेआउट बनाते समय, वेबमास्टरों के मन में समय-समय पर एक प्रश्न उठता है: टेक्स्ट को कैसे स्थानांतरित किया जाएगा? अधिकांश मामलों में, ब्राउज़र इस कार्य को स्वयं ही संभाल लेता है। लेकिन कभी-कभी इस प्रक्रिया को नियंत्रण में रखना पड़ता है, खासकर औपचारिक बनाते समय लंबे शब्दऔर ऐसे वाक्यांश, जिनका यदि ग़लत अनुवाद किया जाए, तो वे अपना अर्थ खो देते हैं।
शब्द-रैप संपत्ति
HTML में लाइनों को अलग करने के लिए एक विशेष टैग होता है
. लेकिन इसका बहुत बार उपयोग डेवलपर्स के बीच बुरा व्यवहार माना जाता है और अक्सर गैर-व्यावसायिकता का संकेत देता है। सबूत के तौर पर, कल्पना करें कि आपके पास एक लोगो है और आप चाहते हैं कि प्रत्येक अक्षर एक नई लाइन से शुरू हो:
परिणाम बोझिल और बदसूरत कोड है जो किसी भी डेवलपर को सांस्कृतिक झटका देगा। और यदि आप चाहते हैं कि लोगो डेस्कटॉप संस्करण पर क्षैतिज रूप से स्थित हो, और यदि स्क्रीन की चौड़ाई 550 पिक्सेल से कम हो तो आपको क्या करना चाहिए? इसलिए, तत्वों की उपस्थिति को अनुकूलित करने के लिए हमेशा कैस्केडिंग स्टाइल शीट्स का उपयोग करें। खासतौर पर टूल्स की मदद से सीएसएस स्थानांतरणस्ट्रिंग्स को अधिक सुंदर तरीके से बनाया गया है। इस मामले में, कोई अनावश्यक मार्कअप नहीं है, जो केवल पेज लोडिंग गति को कम करता है।
टेक्स्ट प्रोसेसिंग के लिए आपको जिस पहली संपत्ति का उपयोग करना चाहिए वह वर्ड-रैप है। तीन मान स्वीकार करता है: सामान्य, ब्रेक-ऑल और कीप-ऑल। काम करने के लिए आपको सिर्फ ब्रेक-ऑल याद रखने की जरूरत है। सामान्य डिफ़ॉल्ट है और इसे निर्दिष्ट करने का कोई मतलब नहीं है। सभी साधनों को अंदर रखें सीएसएस दस्तावेज़लाइन ब्रेक पर रोक. विशेष रूप से चीनी, जापानी और कोरियाई अक्षरों के लिए डिज़ाइन किया गया। इसलिए, यदि आप इनमें से किसी एक भाषा में ब्लॉग नहीं करने जा रहे हैं, तो संपत्ति आपके लिए उपयोगी नहीं होगी। और यह समर्थित भी नहीं है सफ़ारी ब्राउज़रऔर मोबाइल फोनआईओएस पर आधारित.
पिछले उदाहरण से लोगो निर्दिष्ट करने के लिए सीएसएस का उपयोग करनाप्रत्येक अक्षर को एक नई पंक्ति में ले जाने के लिए, आपको निम्नलिखित कोड लिखना होगा:
पी (फ़ॉन्ट: बोल्ड 30पीएक्स हेल्वेटिका, सैन्स-सेरिफ़; चौड़ाई: 25पीएक्स; वर्ड-रैप: ब्रेक-ऑल;)
फ़ॉन्ट की चौड़ाई और आकार इस प्रकार चुना जाता है कि केवल एक अक्षर के लिए पर्याप्त जगह हो। ब्रेक-ऑल मान के साथ वर्ड-रैप ब्राउज़र को हर बार शब्द को एक नई लाइन पर तोड़ने के लिए कहता है। इस संपत्ति को अपूरणीय नहीं कहा जा सकता. लेकिन यह टेक्स्ट के छोटे ब्लॉक, जैसे टिप्पणियाँ दर्ज करने के लिए फ़ील्ड, डिज़ाइन करते समय उपयोगी होता है।
श्वेत-अंतरिक्ष संपत्ति
नए वेब डेवलपर्स द्वारा की जाने वाली एक सामान्य गलती रिक्त स्थान या एंटर कुंजियों के साथ पाठ को संपादित करने का प्रयास करना है, और फिर आश्चर्य होता है कि उनके प्रयास पृष्ठ पर दिखाई क्यों नहीं देते हैं। इससे कोई फर्क नहीं पड़ता कि आप कितनी बार Enter दबाते हैं, ब्राउज़र इसे अनदेखा कर देगा। लेकिन सभी रिक्तियों को ध्यान में रखते हुए, पाठ को आपकी इच्छानुसार प्रदर्शित करने का एक तरीका है।
सीएसएस दस्तावेज़ में, व्हाइट-स्पेस प्रॉपर्टी का उपयोग करके निर्दिष्ट लाइन ब्रेक को रिक्त स्थान या एंटर कीस्ट्रोक्स का सम्मान करने के लिए कॉन्फ़िगर किया जा सकता है। मान प्री-लाइन वाला व्हाइट-स्पेस ब्राउज़र को टेक्स्ट में एंटर देखने के लिए बाध्य करेगा।
यदि आप अपने सीएसएस कोड में प्री-लाइन को प्री-रैप में बदलते हैं, तो लाइन रैप व्हाइटस्पेस को ध्यान में रखेगा। और इसके विपरीत, टेक्स्ट को अब्रैप मान के साथ व्हाइट-स्पेस प्रॉपर्टी निर्दिष्ट करके किसी भी रैपिंग को प्रतिबंधित करें:
#रैपर पी (रंग: #एफएफएफ; पैडिंग: 10पीएक्स; फ़ॉन्ट: बोल्ड 16पीएक्स हेल्वेटिका, सेन्स-सेरिफ़; व्हाइट-स्पेस: अब्रैप;)
पाठ-अतिप्रवाह
टेक्स्ट के साथ काम करने के लिए एक अन्य उपयोगी उपकरण टेक्स्ट-ओवरफ़्लो है। लाइन ब्रेक के अलावा, सीएसएस प्रॉपर्टी आपको कंटेनर भर जाने पर सामग्री को ट्रिम करने की अनुमति देती है। दो मान लेता है:
- क्लिप - बस पाठ को ट्रिम करता है;
- इलिप्सिस - एक इलिप्सिस जोड़ता है।
संपत्ति को काम करने के लिए, तत्व को लाइन ब्रेक और छिपे हुए मूल्य के साथ अतिप्रवाह को प्रतिबंधित करने के लिए भी सेट किया जाना चाहिए।
संक्षिप्त जानकारी
सीएसएस संस्करण
सीएसएस 1 | सीएसएस 2 | सीएसएस 2.1 | सीएसएस 3 |
---|---|---|---|
विवरण
व्हाइट-स्पेस प्रॉपर्टी निर्दिष्ट करती है कि शब्दों के बीच रिक्त स्थान कैसे प्रदर्शित किया जाए। में सामान्य स्थितियाँ HTML कोड में किसी भी संख्या में रिक्त स्थान वेब पेज पर एक के रूप में दिखाई देते हैं। अपवाद टैग है
इस कंटेनर में रखा गया टेक्स्ट सभी स्थानों के साथ आउटपुट होता है क्योंकि इसे उपयोगकर्ता द्वारा स्वरूपित किया गया था। इसलिए व्हाइट-स्पेस टैग के काम करने के तरीके का अनुकरण करता हैलेकिन इसके विपरीत, यह फ़ॉन्ट को मोनोस्पेस में नहीं बदलता है।वाक्य - विन्यास
श्वेत-स्थान: सामान्य | अब्रैप | पूर्व | प्री-लाइन | प्री-रैप | इनहेरिट
मान
सामान्य ब्राउज़र विंडो में टेक्स्ट हमेशा की तरह प्रदर्शित होता है, लाइन ब्रेक स्वचालित रूप से सेट हो जाते हैं। अब्रैप स्पेस को ध्यान में नहीं रखा जाता है, HTML कोड में लाइन ब्रेक को नजरअंदाज कर दिया जाता है, सभी टेक्स्ट को एक लाइन पर प्रदर्शित किया जाता है; उसी समय, एक टैग जोड़ना
टेक्स्ट को एक नई लाइन पर लपेटता है। पूर्व पाठ को सभी रिक्त स्थान और हाइफ़न को ध्यान में रखते हुए दिखाया गया है क्योंकि उन्हें HTML कोड में डेवलपर द्वारा जोड़ा गया था। यदि लाइन बहुत लंबी है और ब्राउज़र विंडो में फिट नहीं बैठती है, तो एक क्षैतिज स्क्रॉल बार जोड़ा जाएगा। पाठ में पूर्व-पंक्ति रिक्त स्थान को ध्यान में नहीं रखा जाता है; यदि पाठ निर्दिष्ट क्षेत्र में फिट नहीं होता है तो पाठ स्वचालित रूप से अगली पंक्ति में चला जाता है। प्री-रैप टेक्स्ट में सभी रिक्त स्थान और विराम संरक्षित होते हैं, लेकिन यदि पंक्ति की चौड़ाई निर्दिष्ट क्षेत्र में फिट नहीं होती है, तो टेक्स्ट स्वचालित रूप से अगली पंक्ति में लपेट दिया जाएगा। विरासत माता-पिता का मूल्य विरासत में मिलती है।पाठ पर मूल्यों का प्रभाव तालिका में प्रस्तुत किया गया है। 1.
HTML5 CSS2.1 IE Cr Op Sa Fx
व्हाइट-स्पेस उदाहरण
फ़र्मेट का अंतिम प्रमेय
एक्स एन+य एन= जेड एन
जहाँ n एक पूर्णांक > 2 है
इस उदाहरण का परिणाम चित्र में दिखाया गया है। 1.
चावल। 1. व्हाइट-स्पेस प्रॉपर्टी लागू करना
वस्तु मॉडल
document.getElementById("elementID").style.whiteSpace
ब्राउज़र्स
ब्राउज़र इंटरनेट एक्सप्लोररसंस्करण 7.0 तक समावेशी प्री-लाइन, प्री-रैप और इनहेरिट मानों का समर्थन नहीं करता है। के लिए
संस्करण 9.5 से पहले का ओपेरा प्री-लाइन मान का समर्थन नहीं करता है। के लिए
संस्करण 3.0 और आईओएस से पहले का सफारी प्री-रैप और प्री-लाइन मानों का समर्थन नहीं करता है।
संस्करण 2.0 तक फ़ायरफ़ॉक्स प्री-लाइन और प्री-रैप मानों का समर्थन नहीं करता है। के लिए
लाइन फ़ीड, लाइन ब्रेक, लाइन ब्रेक - यह सब एक ही चीज़ के बारे में है। में एचटीएमएल भाषान्यूलाइन का प्रयोग अक्सर किया जाता है। कई तरीके हैं: एक टैग का उपयोग करें
एक नई लाइन को तोड़ने के लिए, या आप एक लाइन को तोड़ने के लिए सीएसएस गुणों का उपयोग कर सकते हैं। आइए लाइन ब्रेक टैग का उपयोग करने का एक उदाहरण देखें:सीएसएस में, लाइन ब्रेक विभिन्न तरीकों से किया जा सकता है, उदाहरण के लिए इस तरह:
ब्र (
नाव छोड़ी;
चौड़ाई: 100%;
मार्जिन: 0 0 20px 0; /* पंक्ति 20 पिक्सेल के बाद इंडेंट */
}HTML या CSS का उपयोग करके विभाजक रेखा
HTML में, विभाजन रेखा बनाना बहुत सरल है। एक अयुग्मित टैग का भी उपयोग किया जाता है
- यह विभाजन रेखा है. विभाजन रेखा एक नई रेखा से शुरू होती है और उसके बाद इंडेंट होती है। आप क्षैतिज रेखा की शैली को नियंत्रित कर सकते हैं, और इसका एक विकल्प भी बना सकते हैं। नीचे टैग का उपयोग करके विभाजन रेखा का एक उदाहरण दिया गया है:आइए अब स्टाइल करें (शैलियाँ बदलें, बदलें उपस्थिति) हमारी विभाजन रेखा:
घंटा (
चौड़ाई: 80%; /* रेखा की चौडाई */
ऊँचाई: 4px; /* लाइन की ऊंचाई / मोटाई */
पृष्ठभूमि: #333; /* पृष्ठभूमि / रेखा रंग */
बॉर्डर: 0; /* विभाजन रेखा के चारों ओर फ़्रेम करें (इसे हटाएं) */
मार्जिन: 5px 0 5px 0; /* लाइन के ऊपर और नीचे 5 पिक्सेल पैडिंग */
}और आइए टैग का उपयोग करके अपनी विभाजन रेखा का एक विकल्प बनाएं
और सीएसएस.पाठ 5.
इस पाठ में हम:
1. आइए जानें कि यह कैसे करना है HTML कोडहमारे लिए अधिक सुविधाजनक और पढ़ने में आसान था।
2. आइए देखें कि किसी टेक्स्ट लाइन को सही तरीके से कैसे लपेटा जाए।HTML कोड को सुविधाजनक बनाना.
अब हमारा कोड स्पष्ट और पढ़ने में आसान है, क्योंकि इसमें बहुत कम पाठ है और व्यावहारिक रूप से कोई टैग नहीं है। जब हम अधिक जटिल पेज बनाते हैं, तो कई टैग होंगे, इसलिए सही टैग ढूंढना मुश्किल होगा।
टैग की गड़बड़ी से बचने के लिए, आपको शुरू में टैग और लाइनों को व्यवस्थित करने की आवश्यकता है ताकि उन्हें देखने में आसानी हो। जब ब्राउज़र से जानकारी पढ़ता है एचटीएमएल पेज, इससे उसे कोई फर्क नहीं पड़ता कि कोड में कितनी जगहें और कितनी खाली लाइनें हैं।
हमने हमारे द्वारा बनाए गए पृष्ठ कोड के सापेक्ष पाठ को बदल दिया है, लेकिन इससे कोई फर्क नहीं पड़ता। बाएँ और दाएँ चित्र समान कोड दिखाते हैं। दोनों विकल्प ब्राउज़र द्वारा मॉनिटर स्क्रीन पर बिल्कुल समान रूप से प्रदर्शित किये जायेंगे। सहमत हूं, दाईं ओर दिखाए गए कोड के साथ काम करना बाईं ओर के कोड की तुलना में बहुत आसान होगा।
जिस कोड को हम देख रहे हैं वह बहुत सरल है, लेकिन अब भी दृश्य धारणा में अंतर ध्यान देने योग्य है। "चीजों को क्रम में रखने" के लिए कोई विशिष्ट नियम नहीं हैं; प्रत्येक मास्टर स्वयं निर्णय लेता है कि उसके लिए काम करना कितना सुविधाजनक है।
HTML लाइन ब्रेक. टैग <br>.
चित्र पर ध्यान दें. पहले संस्करण में पाठ एक पंक्ति में लिखा जाता है, दूसरे संस्करण में दो पंक्तियों में।
ब्राउज़र दोनों विकल्पों को समान रूप से प्रदर्शित करेगा. पाठ एक पंक्ति में लिखा जाएगा:
आप पूछते हैं ऐसा क्यों है? दरअसल, किसी एक कोड में, टेक्स्ट का हिस्सा दूसरी लाइन में ले जाया जाता है। यह तार्किक होगा यदि ब्राउज़र में कुछ टेक्स्ट को दूसरी पंक्ति में भी ले जाया जाए, लेकिन इस संबंध में html का अपना तर्क है। यदि हम html कोड में एक लाइन ब्रेक बनाते हैं, तो ब्राउज़र के लिए यह एक स्पेस के बराबर है(कैसे नियमित स्थानपाठ में शब्दों के बीच)। यदि हम टेक्स्ट के भाग को एक पंक्ति में नहीं, बल्कि 2 या 3 (कोई भी संख्या) नीचे ले जाते हैं, तो ब्राउज़र अभी भी इस दूरी को शब्दों के बीच एक नियमित स्थान के रूप में मानेगा और स्क्रीन पर प्रदर्शित होने पर, टेक्स्ट एक पंक्ति में लिखा जाएगा। .
टैग <br>
जब हम तीसरे पाठ में टैग से परिचित हुए, तो मैंने बताया कि ऐसे टैग होते हैं जिन्हें बंद करने की आवश्यकता नहीं होती है। टैग <br>उनमें से एक का उपयोग लाइन ब्रेक के लिए किया जाता है।
आइए इसे कोड में लागू करें:हमने एक टैग डाला है <br>हमारे HTML कोड में और अब जब आप ब्राउज़र के माध्यम से फ़ाइल लॉन्च करते हैं, तो टेक्स्ट का हिस्सा अगली पंक्ति में स्थानांतरित हो जाएगा।
* नोटपैड (Ctrl + S) में परिवर्तन सहेजना और ब्राउज़र (F5) में पेज को रीफ्रेश करना न भूलें।अक्सर एक नया अनुच्छेद जोड़ने की आवश्यकता होती है, लेकिन बिना खाली पंक्ति, जो पैराग्राफ टैग द्वारा डाला जाता है
कुछ पाठ अंशों के लिए, मानक पैराग्राफ़ रिक्ति बिल्कुल अनुपयुक्त है। ये चित्रों के नीचे और तालिकाओं, कविताओं, उद्धरणों, फ़ुटनोट्स और नोट्स में शिलालेख हो सकते हैं।
लाइन ब्रेक को बाध्य करने के लिए, एक विशेष टैग प्रदान किया जाता है, जिसका कार्य इसके नाम br (ब्रेक रो - "ब्रेक ए रो, लाइन") में निहित है। टैग
हाइपरटेक्स्ट भाषा एचटीएमएल मार्कअपइसका मतलब है कि इसके बाद की सभी सामग्री एक नई लाइन पर शुरू होनी चाहिए। यदि आवश्यक हो, तो आप आवश्यक रिक्ति प्राप्त करने के लिए एक पंक्ति में कई टैग जोड़ सकते हैं।टैग
यह केस सेंसिटिव नहीं है और इसमें क्लोजिंग टैग की आवश्यकता नहीं है क्योंकि यह एक खाली तत्व है, लेकिन सभी टैग्स को बंद करने की आदत डालना बेहतर है। एक्सएचटीएमएल में, ब्रेक टैग को बैकस्लैश के साथ "बंद" किया जाना चाहिए।ब्रेक टैग का उपयोग करने का उदाहरण
कार्रवाई में br टैग< /title> <р>काम से अनुपस्थितिр>
कहीं और नहीं और कभी नहीं
मैं उतना बुरा नहीं था
मालिक एक लालची गिरोह हैं
मुझे जिंदा कुतरनाр>
काम से अनुपस्थिति
कहीं और नहीं और कभी नहीं
मैं उतना बुरा नहीं था.
मालिक एक लालची गिरोह हैं
मुझे जिंदा कुतरना.टैग विशेषता
इसका एकमात्र गुण यही है एचटीएमएल टैग
, कहा जाता है यह ब्राउज़र को बताता है कि यदि टेक्स्ट को तथाकथित फ़्लोटिंग तत्व के चारों ओर लपेटना है तो लाइन रैप के साथ क्या करना है, जो उदाहरण के लिए, दाएं/बाएं मानों का उपयोग करके संरेखित विशेषता वाली एक छवि, या सीएसएस में एक ब्लॉक हो सकता है जिसमें फ्लोट प्रॉपर्टी है।XHTML 1.0 / HTML 4.01 विनिर्देशों में, स्पष्ट विशेषता का उपयोग केवल ट्रांज़िशनल, फ़्रेमसेट और के साथ किया जा सकता है, अन्यथा कोड काम नहीं करेगा.
टैग गुण गुण
स्पष्ट विशेषता का प्रभाव उसके मूल्य और फ़्लोट किए गए तत्व के स्थान पर निर्भर करता है। विशेषता 4 मान ले सकती है:
बायाँ मान बाएँ-संरेखित तत्व को लपेटने से रोकता है, इसलिए टेक्स्ट टैग पर ट्रिप हो जाएगा
, छवि या अन्य फ़्लोटिंग तत्व के नीचे स्थित होगा।बिल्कुल वही परिणाम सभी तर्क का उपयोग करने से आएगा, जो कभी भी दाएं या बाएं को अनुमति नहीं देगा।
सही मान टेक्स्ट को दाएं-संरेखित तत्व के चारों ओर लपेटने से रोकता है, इसलिए टैग के बाद
पाठ के पास छवि के चारों ओर दाईं ओर बहने के अलावा कोई विकल्प नहीं होगा।मूल्य कोई नहीं ("न आपका और न ही हमारा") आम तौर पर स्पष्ट विशेषता और टैग से सभी शक्तियों को हटा देता है
चुपचाप लाइन को नीचे ले जाता है।टैग की स्पष्ट विशेषता का कोई डिफ़ॉल्ट मान नहीं है।
टैग
- यह एक सॉफ्ट ट्रांसफर हैलाइन ब्रेक टैग पैराग्राफ के बीच आवश्यक रिक्ति बनाने के लिए बहुत उपयोगी है, जिसके भीतर इसका उपयोग सॉफ्ट ब्रेक के रूप में किया जाता है, लेकिन टेक्स्ट को पैराग्राफ में विभाजित करने के साधन के रूप में नहीं।
आपको टेक्स्ट को फ़ॉर्मेट करने के लिए न्यूलाइन टैग के चक्कर में नहीं पड़ना चाहिए, क्योंकि इसका उपयोग करने के परिणाम हमेशा शानदार नहीं होते हैं।
उदाहरण के लिए, यदि आप टैग का उपयोग करते हैं
किसी अनुच्छेद के भीतर पंक्तियों को तोड़ने के लिए, इसके परिणामस्वरूप उपयोगकर्ता की विंडो में एक "कंघी" दिखाई दे सकती है यदि यह उस विंडो से छोटी है जिसे वेबमास्टर लक्षित कर रहा था।