ऐसे समय होते हैं जब पाठ का एक लंबा स्ट्रिंग एक लेआउट के कंटेनर को ओवरफ्लो कर सकता है।
उदाहरण के लिए:
यहाँ स्कूप है:
overflow-wrap: break-word;सुनिश्चित करता है कि लंबे समय तक तार लपेटेंगे और कंटेनर से बाहर नहीं निकलेंगे। आप के रूप में अच्छी तरह से उपयोग कर सकते हैंword-wrapक्योंकि जैसा कि कल्पना कहती है, वे सचमुच एक दूसरे के लिए केवल वैकल्पिक नाम हैं। कुछ ब्राउज़र एक का समर्थन करते हैं और दूसरे का नहीं। फ़ायरफ़ॉक्स (परीक्षण किया गया v43) केवल समर्थन करता हैword-wrap। पलक (परीक्षण क्रोम v45) या तो एक ले जाएगा।overflow-wrapसभी अपने आप में उपयोग के साथ , शब्द थोड़े टूटेंगे कहीं भी उन्हें ज़रूरत है। यदि एक "स्वीकार्य ब्रेक" चरित्र है (उदाहरण के लिए, शाब्दिक डैश की तरह), तो यह वहां टूट जाएगा, अन्यथा यह सिर्फ वही करता है जो इसे करने की आवश्यकता है।- आप उपयोग के
hyphensसाथ- साथ उपयोग भी कर सकते हैं, क्योंकि तब यह एक ऐसा हाइफ़न जोड़ने की कोशिश करेगा जहाँ ब्राउज़र टूटने पर इसका समर्थन करता है (ब्लिंक लिखने के समय, फ़ायरफ़ॉक्स नहीं करता है)। word-break: break-all;ब्राउज़र को बताना है कि शब्द को जहां भी जरूरत हो उसे तोड़ना ठीक है। हालांकि यह थोड़े भी करता है कि वैसे भी मुझे यकीन नहीं है कि किन मामलों में यह 100% आवश्यक है।
यदि आप हाइफ़न के साथ अधिक मैनुअल होना चाहते हैं, तो आप उन्हें अपने मार्कअप में सुझा सकते हैं। MDN पृष्ठ पर और देखें।
ब्राउज़र का समर्थन
के लिए word-break:
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| ४४ | १५ | 5.5 | १२ | ९ |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 81 | 9.0-9.2 |
के लिए hypens:
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 81 | 4.2-4.3 * |
के लिए overflow-wrap:
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| २३ | ४ ९ | 1 1 | १। | 6.1 |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 4.4 | 7.0-7.1 |
के लिए text-overflow:
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| ४ | । | ६ | १२ | 3.1 |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 2.1 | ३.२ |
एलिप्सिस के साथ अतिप्रवाह को रोकना
विचार करने के लिए एक और दृष्टिकोण पूरी तरह से पाठ को छोटा कर रहा है और उन दीर्घवृत्त जोड़ रहा है जहां पाठ की स्ट्रिंग कंटेनर को मारती है:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )उपयोग करने के बारे में यह अच्छी बात यह text-overflowहै कि यह सार्वभौमिक रूप से समर्थित है।
उदाहरण
CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन हाइफ़नेट लॉन्ग वर्ड देखें।
CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन एलिप्स देखें।
CodePen पर क्रिस कॉयर (@chisciscoyier) द्वारा पेन लाइनिंग आउट लाइन रैपिंग देखें।
और अधिक संसाधनों
- माइकल शार्नागल: सीएसएस में लंबे शब्दों से निपटना
- केनेथ ऑचेनबर्ग: सीएसएस का उपयोग करते हुए वर्ड रैपिंग / हाइफ़नेशन
- एमडीएन: वर्ड-रैप, वर्ड-ब्रेक, हाइफ़न
- विशेष: सीएसएस पाठ स्तर ३
एससीएसएस-झुकाव के लिए
ये उन चीज़ों की तरह होते हैं जिन्हें आप ज़रूरत पड़ने पर कोड में छिड़कते हैं, इसलिए वे अच्छे @ मीक्सिन के लिए बनाते हैं:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )