शब्द-लपेट के बीच अंतर: ब्रेक-शब्द और शब्द-ब्रेक: ब्रेक-शब्द

Question

मुझे कुछ सीएसएस को ठीक करने की आवश्यकता है क्योंकि मेरा टेक्स्ट चारों ओर लपेट नहीं रहा था और अगर यह एक बहुत लंबा शब्द था तो अनिश्चित काल तक चल रहा था।

ज्यादातर मामलों की तरह, मैंने अपनी सीएसएस फ़ाइल में word-wrap: break-word; की कोशिश की और यह काम नहीं किया।

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

आगे, मुझे नहीं लगता कि word-break: break-word; दस्तावेज व्यवहार है क्योंकि W3 का कोई उल्लेख नहीं है। मैंने सफारी और क्रोम पर इसका परीक्षण किया, और यह दोनों पर पूरी तरह से काम करता है, लेकिन मुझे word-break: break-word; का उपयोग करने में संकोच नहीं है क्योंकि मुझे इसका कोई उल्लेख नहीं है।

Answer 1

अद्यतन

आप शब्दों को तोड़ने पर योजना और साथ ही hyphenate चाहते हैं, निम्न प्रयास करें:

.hyphenate { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -webkit-hyphens: auto; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 
} 

यह क्रोम में भी काम किया है ... एक तरह से ... बिना हाइफ़न । वैसे भी एक विस्तृत स्पष्टीकरण इस article में है।

---

word-break:break-word दस्तावेज नहीं है और केवल मास्टर डेवलपर्स इस अल्ट्रा गुप्त तकनीक को जानते हैं जैसे।

असल में यह एक अस्पष्ट -webkit- संपत्ति है जो word-wrap: break-word की तरह काम करता है लेकिन यह गतिशील लंबाई पर भी उपयोग किया जाता है।

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

CaniUse से:

क्रोम, सफारी और अन्य वेबकिट/Blink ब्राउज़र भी अनौपचारिक break-word मूल्य जो word-wrap: break-word की तरह व्यवहार किया जाता है समर्थन करते हैं।