शब्द-विराम - सीएसएस-ट्रिक्स

Anonim

word-breakसीएसएस में संपत्ति जब लाइन ब्रेक होने चाहिए बदलने के लिए इस्तेमाल किया जा सकता। आम तौर पर, टेक्स्ट में लाइन ब्रेक केवल कुछ विशेष स्थानों में हो सकते हैं, जैसे जब कोई स्थान या एक हाइफ़न होता है।

नीचे दिए गए उदाहरण में हम word-breakइसके बजाय अक्षरों के बीच बना सकते हैं :

p ( word-break: break-all; )

यदि हम पाठ की चौड़ाई एक पर सेट करते हैं em, तो शब्द प्रत्येक अक्षर से टूट जाएगा:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा वर्ड-ब्रेक के साथ पेन सेटिंग टेक्स्ट को लंबवत देखें।

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

CodePen पर CSS-Tricks (@ css-tricks) द्वारा वर्ड-ब्रेक के साथ पेन फिक्सिंग लिंक देखें।

मूल्यों

  • normal: शब्द तोड़ने के लिए डिफ़ॉल्ट नियमों का उपयोग करें।
  • break-all: कोई भी शब्द / अक्षर अगली पंक्ति पर टूट सकता है।
  • keep-all: चीनी, जापानी और कोरियाई पाठ शब्दों के लिए नहीं तोड़ा जाता है। अन्यथा यह भी ऐसा ही है normal।

इस संपत्ति का उपयोग अक्सर हाइफ़ेंस संपत्ति के साथ संयोजन के रूप में भी किया जाता है ताकि पुस्तकों में मानक के अनुसार जब एक हाइपेन डाला जाए तो टूट जाता है।

आवश्यक विक्रेता उपसर्गों के साथ पूरा उपयोग है:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

सार्वभौमिक चयनकर्ता पर इन गुणों का उपयोग करना उपयोगी हो सकता है यदि आपके पास बहुत अधिक उपयोगकर्ता-जनित सामग्री वाली साइट है। हालांकि निष्पक्ष चेतावनी, यह शीर्षक और पूर्व-स्वरूपित पाठ पर अजीब लग सकता है (

) है।

सम्बंधित


    

  • ओवरफ्लो-रैप
    • 

  • हाइफ़न
    • 

  • सफेद-अंतरिक्ष
    • 

  • लंबे शब्दों और यूआरएल को संभालना
    • 



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


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


डेस्कटॉप


 

 

 क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी 


 

 

 

 २३ ४ ९ 1 1 १। 6.1 


 

 



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


 

 

 Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी 


 

 

 

 88 .५ 4.4 7.0-7.1 


 

 



सफारी और आईओएस break-allमूल्य का समर्थन करते हैं लेकिन नहींkeep-all