CSS में "वर्ड-ब्रेक: ब्रेक-ऑल" बनाम "वर्ड-रैप: ब्रेक-वर्ड" में क्या अंतर है
जवाबों:
W3 विनिर्देश जो इन के बारे में बात करता है, सुझाव देता word-break: break-allहै कि यह सीजेके (चीनी, जापानी और कोरियाई) पाठ के साथ एक विशेष व्यवहार की आवश्यकता के लिए है, जबकि word-wrap: break-wordअधिक सामान्य, गैर-सीजेके-जागरूक, व्यवहार है।
word-breakअक्षरों के बीच नरम आवरण के अवसरों को निर्दिष्ट करता है ..." डब्ल्यू 3 सी कल्पना एक उदाहरण के रूप में सीएलके पाठ का उपयोग करती है , लेकिन यह इसका एकमात्र इच्छित उपयोग नहीं है। word-breakजब आप उन्हें कंटेनर की चौड़ाई में तोड़ना चाहते हैं, तो लंबे स्ट्रिंग्स (जैसे URL या कोड की लाइनें) के साथ संयोजन के रूप में उपयोग करना आम है - खासकर अगर कंटेनर एक preतत्व या टेबल सेल है जहां word-wrapसंपत्ति अपेक्षित रूप से काम नहीं कर सकती है ।
word-wrap: break-word हाल ही में बदल गया है overflow-wrap: break-word
- अगली पंक्ति में लंबे शब्द लपेटेंगे।
- विभिन्न शब्दों को समायोजित करता है ताकि वे बीच में न टूटें।
word-break: break-all
- भले ही यह एक निरंतर शब्द या कई शब्द हों, उन्हें चौड़ाई सीमा के किनारे तोड़ देता है। (एक ही शब्द के पात्रों के भीतर भी)
इसलिए यदि आपके पास कई निश्चित आकार के स्पैन हैं जो गतिशील रूप से सामग्री प्राप्त करते हैं, तो आप बस उपयोग करना पसंद कर सकते हैं word-wrap: break-word , जिस तरह से केवल निरंतर शब्द बीच में टूट जाते हैं, और यदि यह एक वाक्य है जिसमें कई शब्द शामिल हैं, तो रिक्त स्थान को अक्षुण्ण शब्दों को प्राप्त करने के लिए समायोजित किया जाता है। (एक शब्द के भीतर कोई तोड़ नहीं)।
और अगर इससे कोई फर्क नहीं पड़ता, तो या तो जाओ।
के साथ word-break, एक बहुत लंबा शब्द उस बिंदु पर शुरू होता है जिसे इसे शुरू करना चाहिए और जब तक आवश्यक हो, तब तक तोड़ा जा रहा है
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.हालाँकि, word-wrapएक बहुत लंबे शब्द के साथ , यह उस बिंदु पर शुरू नहीं होगा जो इसे शुरू होना चाहिए। यह अगली पंक्ति में लपेटता है और तब तक आवश्यक रूप से टूट जाता है
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.break-word। मैंने झुंझलाकर पाया कि word-breakटूट जाता है, लेकिन नहीं word-wrap। दोनों का उपयोग करके break-wordइसे css-tricks.com/snippets/css/…
word-wrapoverflow-wrapशायद इस भ्रम से बचने के लिए इसका नाम बदल दिया गया है।
अब यह हमारे पास है:
ओवरफ़्लो- चादर
ओवरफ़्लो- चादर संपत्ति या नहीं, ब्राउज़र आदेश अतिप्रवाह को रोकने के लिए एक अन्यथा अटूट स्ट्रिंग बहुत लंबी है, जब इसके युक्त बॉक्स में फिट करने के लिए शब्दों के भीतर लाइनों टूट सकता है निर्दिष्ट करने के लिए प्रयोग किया जाता है।
संभावित मान:
साधारण : इंगित करता है कि लाइनें केवल सामान्य शब्द विराम बिंदुओं पर टूट सकती हैं।
ब्रेक-शब्द : इंगित करता है कि आम तौर पर अटूट शब्दों को अनियंत्रित बिंदुओं पर तोड़ा जा सकता है यदि लाइन में अन्यथा स्वीकार्य ब्रेक पॉइंट नहीं हैं।
स्रोत ।
शब्द-तोड़
शब्द-तोड़ सीएसएस संपत्ति है कि क्या शब्दों के भीतर लाइनों को तोड़ने के लिए निर्दिष्ट करने के लिए प्रयोग किया जाता है।
- साधारण : डिफ़ॉल्ट लाइन ब्रेक नियम का उपयोग करें।
- सब तोड़ना : गैर-सीजेके (चीनी / जापानी / कोरियाई) टेक्स्ट के लिए किसी भी चरित्र के बीच वर्ड ब्रेक डाला जा सकता है।
- Keep-all : CJK टेक्स्ट के लिए वर्ड ब्रेक की अनुमति न दें। गैर-सीजेके पाठ व्यवहार सामान्य के लिए समान है।
स्रोत ।
अब आपके सवाल पर, अतिप्रवाह-आवरण और शब्द-विराम के बीच मुख्य अंतर यह है कि पहले एक अतिप्रवाह स्थिति पर व्यवहार को निर्धारित करता है, जबकि बाद में एक सामान्य स्थिति (कोई अतिप्रवाह) पर व्यवहार को निर्धारित करता है । एक अतिप्रवाह स्थिति होता है कंटेनर पाठ पकड़ करने के लिए पर्याप्त स्थान नहीं है जब। इस स्थिति पर ब्रेकिंग लाइनें मदद नहीं करती हैं क्योंकि कोई जगह नहीं है (फिक्स चौड़ाई और ऊंचाई के साथ एक बॉक्स की कल्पना करें)।
इसलिए:
overflow-wrap: break-word: अतिप्रवाह की स्थिति में, शब्दों को तोड़ दें।word-break: break-all: एक सामान्य स्थिति में, बस पंक्ति के अंत में शब्दों को तोड़ दें। एक अतिप्रवाह आवश्यक नहीं है।
overflow-wrap/ word-wrapउन्हें लपेटकर नहीं बनाया। शायद इसलिए क्योंकि ओवरफ्लो के बजाय एक निश्चित चौड़ाई के बिना टेबल सेल का विस्तार होता है। इसके बजाय, तालिका व्यापक हो गई और अन्य तत्वों से टकरा गई। word-breakदूसरी ओर इसे ठीक कर दिया।
table-layout: fixed;(संभवतः साथ में width/ साथ max-width) इसे काम कर सकता है overflow-wrap/word-wrapलेकिन यह विशिष्ट उपयोग के मामले पर निर्भर करता है; जैसा word-breakआप चाहते हैं वैसा नहीं हो सकता।
किसी tableतत्व में सामग्री पर लागू होने पर कम से कम फ़ायरफ़ॉक्स (v24 के रूप में) और क्रोम (v30 के रूप में) :
word-wrap:break-word
वास्तव में लपेटने के लिए लंबे शब्दों का कारण नहीं होगा, जिसके परिणामस्वरूप तालिका इसके कंटेनर की सीमा से अधिक हो सकती है;
word-break:break-all
शब्दों को लपेटने में परिणाम होगा , और इसके कंटेनर के भीतर तालिका फिटिंग।
table-layout:fixedकरने के लिए तालिका का विस्तार नहीं करने के लिए उपयोग कर सकते हैंword-wrap:break-work
table-layout:fixed
word-wrapके साथ संयोजन का उपयोग करते समय यह व्यवहार तब भी होता है जब preतक कि उनके पास एक निश्चित चौड़ाई निर्धारित न हो। उपयोग word-breakकरने से वांछित परिणाम प्राप्त होता है। मैं इस पोस्ट से ऊपर एक टिप्पणी में जुड़ा हुआ हूं क्योंकि यह एक सामान्य उपयोग के मामले को दर्शाता है।
यह सब मैं पता लगा सकता हूं। यकीन नहीं है कि अगर यह मदद करता है, लेकिन सोचा कि मैं इसे मिश्रण में जोड़ दूँगा
वर्ड रैप
यह गुण निर्दिष्ट करता है कि क्या सामग्री द्वारा किसी तत्व के लिए निर्दिष्ट रेंडरिंग बॉक्स की सीमा से अधिक होने पर वर्तमान रेंडर लाइन को तोड़ देना चाहिए (यह इरादे में 'क्लिप' और 'ओवरफ्लो' गुणों के कुछ तरीकों से समान है।) यह संपत्ति केवल लागू होनी चाहिए। यदि तत्व का एक दृश्य प्रतिपादन है, तो स्पष्ट ऊंचाई / चौड़ाई वाला एक इनलाइन तत्व है, बिल्कुल स्थित है और / या एक ब्लॉक तत्व है।
शब्द ब्रेक
यह गुण शब्दों के भीतर लाइन ब्रेकिंग व्यवहार को नियंत्रित करता है। यह उन मामलों में विशेष रूप से उपयोगी है जहां एक तत्व के भीतर कई भाषाओं का उपयोग किया जाता है।
word-wrapऔर word-breakदोनों का मूल्य हो सकता हैbreak-word
वहाँ एक है विशाल अंतर। break-allमूल रूप से पठनीय पाठ को प्रस्तुत करने के लिए अनुपयोगी है।
मान लीजिए कि आपको This is a text from an old magazineएक कंटेनर में स्ट्रिंग मिली है जो केवल प्रति पंक्ति 6 वर्णों में फिट होती है।
word-break: break-all
This i
s a te
xt fro
m an o
ld mag
azineजैसा कि आप देख सकते हैं परिणाम भयानक है। break-allके रूप में संभव के रूप में प्रत्येक पंक्ति में कई chararacters फिट करने की कोशिश करेंगे, यह भी 2 पंक्तियों की तरह "2 है" पर एक 2 अक्षर शब्द को विभाजित करेगा! यह हास्यास्पद है। यही कारण है कि break-allशायद ही कभी इस्तेमाल किया जाता है।
word-wrap: break-word
This
is a
text
from
an old
magazi
nebreak-wordकेवल उन शब्दों को तोड़ देगा जो कंटेनर को फिट करने के लिए बहुत लंबे हैं (जैसे "पत्रिका", जो 8 वर्ण है, और कंटेनर केवल 6 वर्णों को फिट करता है)। यह उन शब्दों को कभी नहीं तोड़ देगा जो कंटेनर को अपनी संपूर्णता में फिट कर सकते हैं, इसके बजाय यह उन्हें एक नई पंक्ति में धकेल देगा।
<div style="width: 100px; border: solid 1px black; font-family: monospace;">
<h1 style="word-break: break-all;">This is a text from an old magazine</h1>
<hr>
<h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</divword-break:break-all :
सीमा पर जारी रखने के लिए शब्द फिर न्यूलाइन में विराम।
word-wrap:break-word :
पहले तो न्यूलाइन में वर्ड रैप और फिर बॉर्डर पर जारी।
उदाहरण :
div {
border: 1px solid red;
width: 200px;
}
span {
background-color: yellow;
}
.break-all {
word-break:break-all;
}
.break-word {
word-wrap:break-word;
}<b>word-break:break-all</b>
<div class="break-all">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>
<b> word-wrap:break-word</b>
<div class="break-word">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>संबंधित W3 विनिर्देशों से - जो संदर्भ की कमी के कारण बहुत अस्पष्ट हो सकता है - एक निम्नलिखित को घटा सकता है:
word-break: break-allसीजेके (चीनी, जापानी या कोरियाई) चरित्र लेखन में विदेशी, गैर-सीजेके (पश्चिमी कहें) शब्दों को तोड़ने के लिए है।word-wrap: break-wordएक गैर-मिश्रित भाषा में शब्द तोड़ने के लिए है (हमें केवल पश्चिमी कहें)।
कम से कम, ये W3 के इरादे थे। वास्तव में जो कुछ भी हुआ वह एक परिणाम के रूप में ब्राउज़र की असंगतियों के साथ एक बड़ा मुर्गा था। इसमें शामिल विभिन्न समस्याओं का एक उत्कृष्ट लेखन है ।
निम्नलिखित कोड स्निपेट क्रॉस ब्राउज़र वातावरण में CSS का उपयोग करके वर्ड रैपिंग को प्राप्त करने के सारांश के रूप में कार्य कर सकता है:
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;पिछली टिप्पणियों के अलावा ब्राउज़र समर्थन इसके लिए word-wrapथोड़ा बेहतर लगता है word-break।