ओवरफ्लो-रैप - सीएसएस-ट्रिक्स

overflow-wrapसीएसएस में संपत्ति भी आप अपने ब्राउज़र एक अन्यथा अटूट जगह में कई पंक्तियों पर लक्षित तत्व के अंदर टेक्स्ट की पंक्ति में तोड़ सकते हैं निर्दिष्ट करने के लिए अनुमति देता है। यह अतिप्रवाह के कारण लेआउट समस्याओं के कारण पाठ की असामान्य रूप से लंबी स्ट्रिंग से बचने में मदद करता है।

.example ( overflow-wrap: break-word; )

मूल्यों

• normal: डिफ़ॉल्ट। ब्राउज़र सामान्य लाइन ब्रेकिंग नियमों के अनुसार लाइनों को तोड़ देगा। शब्द या अखंड तार नहीं टूटेंगे, भले ही वे कंटेनर को ओवरफ्लो करें।
• break-word: वर्णों के शब्द या तार जो उनके कंटेनर के अंदर फिट होने के लिए बहुत बड़े होते हैं, एक अनियंत्रित जगह पर लाइन ब्रेक लगाने के लिए टूट जाएंगे। hyphensसंपत्ति का उपयोग करने पर भी एक हाइफ़न वर्ण नहीं डाला जाएगा ।
• inherit: लक्षित तत्व को overflow-wrapअपने तत्काल माता-पिता पर परिभाषित संपत्ति का मूल्य विरासत में प्राप्त करना चाहिए ।

नीचे दिए गए डेमो में टॉगल बटन है जो आपको normalऔर के बीच स्विच करने की अनुमति देता है break-word।

CodePen पर Louis Lazaris (@impressivewebs) द्वारा पेन ओवरफ्लो-रैप / वर्ड-रैप डेमो देखें।

समस्या overflow-wrapको हल करने का प्रयास करने के लिए, डेमो अपेक्षाकृत छोटे कंटेनर के अंदर एक असामान्य रूप से लंबे शब्द का उपयोग करता है। जब आप टॉगल break-wordकरते हैं, तो शब्द उपलब्ध स्थान की छोटी मात्रा को समायोजित करने के लिए टूट जाता है, जैसे कि शब्द कई शब्द थे।

गैर-ब्रेकिंग स्पेस वर्णों ( ) का एक स्ट्रिंग उसी तरह से व्यवहार किया जाएगा और एक उपयुक्त स्थान पर भी टूट जाएगा।

overflow-wrapउन तत्वों पर लागू किया जाता है, जिनमें असम्बद्ध उपयोगकर्ता-जनित सामग्री होती है (जैसे टिप्पणी अनुभाग)। यह लंबे URL और पाठ के अन्य अटके तार (जैसे बर्बरता) को वेब पेज के लेआउट को तोड़ने से रोक सकता है।

करने के लिए समानता word-breakसंपत्ति

overflow-wrapऔर word-breakबहुत समान व्यवहार करते हैं और समान समस्याओं को हल करने के लिए इस्तेमाल किया जा सकता है। सीएसएस विनिर्देश में बताया गया अंतर का एक मूल सारांश है:

• overflow-wrap आम तौर पर एक कंटेनर के बाहर बहने वाले पाठ के कारण टूटी हुई लेआउट के कारण लंबे तार के साथ समस्याओं से बचने के लिए उपयोग किया जाता है।
• word-break आमतौर पर चीनी, जापानी और कोरियाई (CJK) जैसी भाषाओं से जुड़े पत्रों के बीच नरम आवरण के अवसरों को निर्दिष्ट करता है।

word-breakसीजेके सामग्री में कैसे इस्तेमाल किया जा सकता है, इसके उदाहरणों का वर्णन करने के बाद , कल्पना कहती है: "केवल अतिप्रवाह के मामले में अतिरिक्त ब्रेक के अवसरों को सक्षम करने के लिए, देखें overflow-wrap"।

इससे, हम word-breakगैर-अंग्रेज़ी सामग्री के साथ सबसे अच्छा उपयोग कर सकते हैं, जिसके लिए विशिष्ट शब्द-ब्रेकिंग नियमों की आवश्यकता होती है, और जिसे अंग्रेजी सामग्री के साथ जोड़ दिया जा सकता है, जबकि overflow-wrapलंबे स्ट्रिंग्स के कारण टूटी हुई लेआउट से बचने के लिए उपयोग किया जाना चाहिए, चाहे भाषा का उपयोग न किया जाए ।

ऐतिहासिक word-wrapसंपत्ति

overflow-wrapअपने पूर्ववर्ती, word-wrapसंपत्ति के लिए मानक नाम है । word-wrapमूल रूप से एक मालिकाना इंटरनेट एक्सप्लोरर-केवल सुविधा थी जो अंततः मानक नहीं होने के बावजूद सभी ब्राउज़रों में समर्थित थी।

word-wrapसमान मूल्यों को स्वीकार overflow-wrapकरता है और उसी तरह व्यवहार करता है। युक्ति के अनुसार, ब्राउज़र को " संपत्ति के word-wrapलिए एक वैकल्पिक नाम के रूप में व्यवहार करना चाहिए overflow-wrap, जैसे कि यह एक आशुलिपि थी overflow-wrap"। इसके अलावा, सभी उपयोगकर्ता एजेंटों को word-wrapविरासत के कारणों के लिए अनिश्चित काल तक समर्थन करना आवश्यक है ।

दोनों overflow-wrapऔर word-wrapके रूप में सत्यापनकर्ता CSS3 के खिलाफ परीक्षण या उच्च (वर्तमान में डिफ़ॉल्ट) पर सेट है जब तक सीएसएस प्रमाणीकरण में सफल होगा।

सम्बंधित

• शब्द-विराम
• हाइफ़न
• सफेद-अंतरिक्ष
• लंबे शब्दों और यूआरएल को संभालना

अधिक जानकारी

• वर्ड-रैप: एक CSS3 प्रॉपर्टी जो हर ब्राउज़र में काम करती है
• W3C पर ओवरफ्लो रैपिंग
• word-breakबनाम पर ढेर अतिप्रवाह पर चर्चाoverflow-wrap

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
२३	४ ९	1 1	१।	6.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	4.4	7.0-7.1

ऊपर दिखाए गए "आंशिक" समर्थन पुराने ब्राउज़र का समर्थन करने के कारण है, word-wrapलेकिन नहीं overflow-wrap। दोनों का उपयोग करके पीछे की संगतता सुनिश्चित कर सकते हैं।

W3C विनिर्देश के संपादक के ड्राफ्ट संस्करण में एक नया मूल्य शामिल है जिसे break-spaces"संरक्षित" सफेद अंतरिक्ष वर्णों के अनुक्रमों से संबंधित है। इस सुविधा के लिए कोई ज्ञात ब्राउज़र समर्थन नहीं है, और यह कल्पना के ड्राफ्ट संस्करण में शामिल नहीं है।