सीएसएस लंबी लाइन रैपिंग. सीएसएस में उन शब्दों को कैसे लपेटें जो किसी ब्लॉक में फिट नहीं होते? उन शब्दों के लिए हाइफ़नेशन सक्षम करें जो फिट नहीं हैं

💖क्या आपको यह पसंद है?लिंक को अपने दोस्तों के साथ साझा करें

सभी को नमस्कार और चलिए शुरू करते हैं। मान लीजिए कि हमारे पास निम्नलिखित पाठ है:

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

यहां हमारे पास कुछ पाठ है जिसके साथ अब हम काम करना शुरू करेंगे।

और पहली संपत्ति जिस पर हम विचार करेंगे उसे शब्द-विराम कहा जाता है

शब्द-विराम: सामान्य | सब कुछ रखो | सभी को तोड़े

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

पी (शब्द-विराम: ब्रेक-ऑल;।)

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

सौभाग्य से, एक ऐसी ही संपत्ति है जो केवल उन शब्दों को स्थानांतरित करती है जो वर्णों में फिट नहीं होते हैं। इसे ओवरफ़्लो-रैप कहा जाता है:

पी (ओवरफ्लो-रैप: ब्रेक-वर्ड;)

और ब्रेक-वर्ड वैल्यू लागू करने के बाद, हमारे सभी टेक्स्ट को शब्द दर शब्द स्थानांतरित किया जाता है, और जो शब्द निर्दिष्ट चौड़ाई में फिट नहीं होते हैं उन्हें वर्ण दर वर्ण स्थानांतरित किया जाता है। हम कह सकते हैं कि कार्य पूरा हो गया! ब्रेक-वर्ड मान के अतिरिक्त, यह संपत्ति स्वीकार करती है:

अतिप्रवाह-लपेटें: सामान्य | ब्रेक-शब्द | विरासत में मिला;

आइए अब टेक्स्ट में शब्द रैपिंग के लिए अधिक उन्नत सीएसएस प्रॉपर्टी पर चलते हैं।

आइए व्हाइट-स्पेस प्रॉपर्टी पर विचार करें, जिसके साथ हम टेक्स्ट को मोनोस्पेस में बदले बिना प्री टैग के संचालन का अनुकरण कर सकते हैं।

श्वेत-स्थान: सामान्य | अब्रैप | पूर्व | प्री-लाइन | प्री-रैप | इनहेरिट

अनिवार्य रूप से, इस संपत्ति का उपयोग करके, हम केवल पाठ में रिक्त स्थान के साथ काम करते हैं। उदाहरण के लिए, यदि हम अपने पाठ में निम्नलिखित शैली लागू करते हैं:

व्हाइट-स्पेस: अब्रैप;

सभी लाइन ब्रेक को नजरअंदाज कर दिया जाएगा और हमारा टेक्स्ट एक लाइन के रूप में प्रदर्शित होगा।

श्वेत-स्थान: पूर्व;

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

यदि हम न केवल लाइन ब्रेक को ध्यान में रखना चाहते हैं सोर्स कोड, लेकिन शब्दों के बीच रिक्त स्थान भी, तो आपको निर्दिष्ट करने की आवश्यकता है:

व्हाइट-स्पेस: प्री-रैप;

मूलतः मैं आपको शब्द हाइफ़नेशन के बारे में बस इतना ही बताना चाहता था सीएसएस का उपयोग करना. मुझे आशा है कि यह लेख आपके लिए उपयोगी होगा और आप प्राप्त ज्ञान का एक से अधिक बार उपयोग करेंगे।

खैर, मैं आपको अलविदा कहता हूं। मैं आपकी सफलता और शुभकामनाएँ देता हूँ! अलविदा!

निर्धारित करें कि लंबे शब्दों को कैसे लपेटा जाए:

  1. केवल वहीं जहां डैश, स्पेस या एंटर है (नॉन-ब्रेकिंग स्पेस और नॉन-ब्रेकिंग हाइफ़न को छोड़कर)। एक शब्द के हिस्सों के बीच एक हाइफ़न लिखा जाता है (उदाहरण के लिए, लाल-पीला), और शब्दों के बीच एक डैश लिखा जाता है। "सॉफ्ट हाइफ़न" - केवल तभी प्रकट होता है जब स्थानांतरण आवश्यक हो। यदि बात माता-पिता से आगे निकल जाए, तो या ​बिना किसी लाइन के अपने हिस्से को स्थानांतरित करता है। गणितीय अभिव्यक्तियाँ ऋण चिह्न का उपयोग करती हैं (उदाहरण के लिए, 5 - 2)। फ़ोन नंबर एक अंक बार प्रदर्शित करते हैं (उदाहरण के लिए, +7 800 000‒00‒00)। और यह सब वही परिचित चीज़ नहीं है जो कीबोर्ड पर होती है।
  2. किसी भी किरदार के बाद.
  3. हाइफ़न के स्वचालित उपयोग के साथ रूसी भाषा के नियमों के अनुसार।

अतिप्रवाह-लपेटें
वर्ड रैप
शब्द-विच्छेद
पंक्ति तोड़ना
हाइफ़न

हमारे एक हजार नौ सौ निन्यानबे किलोग्राम का पहले ही दोबारा निरीक्षण किया जा चुका है लिफ्टर-बुलडोजर-लोडर

लैंग='आरयू'लैंग='आरयू'>हमारे एक हजार नौ सौ निन्यानबे का पहले ही दोबारा निरीक्षण किया जा चुका है - किलोग्राम उखाड़ने वाला-बुलडोजर-लोडर

एक संपत्ति और दूसरी संपत्ति में क्या अंतर है?

डिफ़ॉल्ट रूप से, लंबे शब्दों को तब तक हाइफ़न नहीं किया जाता है जब तक कि स्पष्ट रूप से हाइफ़न द्वारा इंगित नहीं किया जाता है, और एक नई पंक्ति पर शुरू होते हैं।

आंखों को तुरंत दिखाई देने वाले डैश को अनदेखा करने के लिए, हम शब्द-विराम जोड़ते हैं: रखें-सभी; .

ब्राउज़र को सॉफ्ट हाइफ़न पर ध्यान देने से रोकने के लिए, हाइफ़न डालें: कोई नहीं; .

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

जब एक साथ प्रयोग किया जाता है तो शब्द-विच्छेद: तोड़-सब; हाइफ़न के साथ: ऑटो; , बाद वाले को नजरअंदाज कर दिया जाता है। हाइफ़न: ऑटो; किसी भी हाइफ़न को अपने विवेक पर रखता है। लेकिन इसे काम करने के लिए, आपको div में lang='ru' विशेषता निर्दिष्ट करके अपनी भाषा को इंगित करना होगा।

शब्दों को दूसरी पंक्ति में न लपेटें

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

हाइफ़न के साथ शब्द रैपिंग को नियंत्रित करें: ऑटो;

टेट्राहाइड्रोपाइरानिलसाइक्लोपेंटाइलटेट्राहाइड्रोपाइरिडोपाइरीडीन

टेट्राहाइड्रोपाइरानिलसाइक्लोपेंटाइलटेट्राहाइड्रोपाइरिडो pyridinoउच्च

नमस्ते)। मैं सीएसएस भाषा के विभिन्न उपयोगी गुणों के बारे में लिखना जारी रखता हूं, जो किसी न किसी तरह से लेआउट में मदद कर सकते हैं। और आज मैं आपको बताना चाहता हूं कि कैसे करना है सीएसएस स्थानांतरणशब्द यदि वे उनके पात्र में फिट नहीं बैठते। मैं आपको एक वास्तविक उदाहरण के साथ सब कुछ दिखाऊंगा।

उन शब्दों के लिए हाइफ़नेशन सक्षम करें जो फिट नहीं हैं

मान लीजिए कि मेरे पास 100 पिक्सेल चौड़ा एक ब्लॉक है और मुझे उसमें कुछ पाठ लिखना है। पाठ में शब्द शामिल है " आत्म निकालने". उदाहरण के लिए, संग्रह इस प्रकार होता है) लेकिन बात यह नहीं है। यह शब्द बहुत लंबा है, यह बस कंटेनर की चौड़ाई में फिट नहीं होगा। आइए इसे ऐसे संकीर्ण ब्लॉक (100 पिक्सेल) में लिखें। क्या हो जाएगा?

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

वर्ड-रैप: ब्रेक-वर्ड;

और अधिक आश्वस्त होने के लिए आप लिख भी सकते हैं गद्दी(गद्दी)। इसलिए, संपत्ति को लागू करने के बाद, हम देखते हैं कि जो शब्द बहुत लंबे हैं वे अक्षर दर अक्षर दूसरी पंक्ति में स्थानांतरित हो जाएंगे। इसके अलावा, भले ही दूसरी पंक्ति शब्द के लिए पर्याप्त न हो, फिर भी इसका शेष भाग तीसरे में स्थानांतरित कर दिया जाएगा, आदि।

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

वर्ड-रैप का उपयोग कब करें

दरअसल, अब तक मुझे 2 उपयोग के मामले दिखे हैं। पहला केवल संकीर्ण ब्लॉकों के लिए है, जहां आप डरते हैं कि लंबे शब्द ब्लॉक की सीमाओं से परे भद्दे ढंग से चिपक सकते हैं। दूसरा तब होता है जब डिज़ाइनर का इरादा साइट शीर्षक को कई पंक्तियों में रखने का होता है।

तो, इस लेख में हमने सीखा कि सीएसएस में वर्ड रैपिंग कैसे करें। आज मेरे लिए बस इतना ही है. फिर मिलते हैं।

व्हाइट-स्पेस प्रॉपर्टी निर्दिष्ट करती है कि शब्दों के बीच रिक्त स्थान कैसे प्रदर्शित किया जाए। में सामान्य स्थितियाँ HTML कोड में किसी भी संख्या में रिक्त स्थान वेब पेज पर एक के रूप में दिखाई देते हैं। अपवाद तत्व है

, इस कंटेनर में रखा गया टेक्स्ट सभी स्थानों के साथ आउटपुट होता है, क्योंकि इसे उपयोगकर्ता द्वारा स्वरूपित किया गया था।  तो व्हाइट-स्पेस कार्य का अनुकरण करता है 
लेकिन इसके विपरीत, यह फ़ॉन्ट को मोनोस्पेस में नहीं बदलता है।

संक्षिप्त जानकारी

पदनाम

विवरणउदाहरण
<тип> मान के प्रकार को इंगित करता है.<размер>
ए && बीमान निर्दिष्ट क्रम में आउटपुट होने चाहिए।<размер> && <цвет>
ए | बीइंगित करता है कि आपको प्रस्तावित मानों (ए या बी) में से केवल एक मान का चयन करने की आवश्यकता है।सामान्य | छोटे अक्षर
ए || बीप्रत्येक मान का उपयोग स्वतंत्र रूप से या दूसरों के साथ किसी भी क्रम में किया जा सकता है।चौड़ाई || गिनती करना
समूह मान.[फसल || पार करना ]
* शून्य या अधिक बार दोहराएँ.[,<время>]*
+ एक या अधिक बार दोहराएँ.<число>+
? निर्दिष्ट प्रकार, शब्द या समूह वैकल्पिक है।इनसेट?
(ए, बी)कम से कम A दोहराएँ, लेकिन B से अधिक बार नहीं।<радиус>{1,4}
# अल्पविराम से अलग करके एक या अधिक बार दोहराएँ।<время>#
×

मान

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

पाठ पर मूल्यों का प्रभाव तालिका में प्रस्तुत किया गया है। 1.

उदाहरण

व्हाइट-स्पेस

उदाहरण

फ़र्मेट का अंतिम प्रमेय
एक्स एन+य एन= जेड एन
जहाँ n एक पूर्णांक > 2 है



इस उदाहरण का परिणाम चित्र में दिखाया गया है। 1.

चावल। 1. व्हाइट-स्पेस प्रॉपर्टी लागू करना

ऑब्जेक्ट मॉडल

एक वस्तु.style.व्हाइटस्पेस

टिप्पणी

ब्राउज़र इंटरनेट एक्सप्लोररसंस्करण 7.0 तक समावेशी प्री-लाइन और प्री-रैप मानों का समर्थन नहीं करता है। के लिए