दिलचस्प पोस्ट
सी ++ क्लास का आकार कैसे निर्धारित किया जाता है? एंड्रॉइड सूची दृश्य ताज़ा करें अजगर में अतिभारित फ़ंक्शंस? पायथन में किसी अन्य फ़ंक्शन पर तर्कों के साथ कार्य पास करना? JQuery के साथ मध्य बटन क्लिक (स्क्रॉल बटन) का पता लगाएं एंड्रॉइड आईसीएस और एमजेपीईजी एसिंक टास्क का इस्तेमाल करते हुए मैं प्रगतिबार पर पाठ कैसे डाल सकता हूं? उत्पादन में गिट पुश (एफ़टीपी) रेल में कई रिश्ते के लिए कई बनाना एक्लिप्स में ब्रेडक्रंब को अक्षम कैसे करें क्यों शून्य = शून्य एसक्यूएल सर्वर में झूठ का मूल्यांकन करता है किसी सामग्री स्क्रिप्ट का उपयोग करके पृष्ठ संदर्भ में कोड डालें JAXB विखंडू में बड़े XML फ़ाइलों को पार्स कर सकते हैं मैं किसी दृश्य को प्रोग्राम को एक आईडी कैसे प्रदान करूं? एक ggplot में कुछ किंवदंतियों को बंद करना

"शब्द-ब्रेक: ब्रेक-ऑल" बनाम "वर्ड-रैप: ब्रेक-वर्ड" सीएसएस में क्या अंतर है?

मैं वर्तमान में सोच रहा हूं कि दोनों के बीच का अंतर क्या है जब मैंने दोनों का इस्तेमाल किया तो वे शब्द को तोड़ने लगते हैं, अगर वह कंटेनर को फिट नहीं कर रहा है। लेकिन डब्ल्यू .3 सी ने ऐसा करने के दो तरीके क्यों बनाए?

वेब के समाधान से एकत्रित समाधान ""शब्द-ब्रेक: ब्रेक-ऑल" बनाम "वर्ड-रैप: ब्रेक-वर्ड" सीएसएस में क्या अंतर है?"

डब्लू 3 विनिर्देश, जो इन के बारे में बात करते हैं, वे word-break: break-all को सीजेके (चीनी, जापानी और कोरियाई) पाठ के साथ एक विशेष व्यवहार की आवश्यकता के लिए सुझाव देते हैं, जबकि word-wrap: break-word अधिक सामान्य, गैर सीजेके-जागरूक, व्यवहार

word-wrap: break-word हाल ही में overflow-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. 

फ़ायरफ़ॉक्स में कम से कम (v24 के रूप में) और क्रोम (v30 के रूप में), जब table तत्व में सामग्री पर लागू होता है:

word-wrap:break-word

वास्तव में लंबे शब्दों को लपेटने का कारण नहीं होगा, जो इसके कंटेनर की सीमा से अधिक तालिका में हो सकता है;

word-break:break-all

इसके परिणामस्वरूप शब्द लपेटने होंगे, और इसके कंटेनर के भीतर टेबल फिटिंग।

यहां छवि विवरण दर्ज करें

jsfiddle डेमो

यह सब मुझे पता चल सकता है यकीन है कि अगर यह मदद करता है, लेकिन मुझे लगा कि मैं इसे मिश्रण में जोड़ूँगा

वर्ड रैप

यह प्रॉपर्टी निर्दिष्ट करती है कि वर्तमान रेंडर की गई रेखा को तोड़ना चाहिए यदि सामग्री एक तत्व के लिए निर्दिष्ट रेंडरिंग बॉक्स की सीमा से अधिक हो जाती है (यह कुछ मायनों में 'क्लिप' और 'अतिप्रवाह गुण' के इरादे में समान है।) यह गुण केवल लागू होना चाहिए यदि तत्व में दृश्य प्रतिपादन होता है, तो यह स्पष्ट रूप से ऊंचाई / चौड़ाई वाला एक इनलाइन तत्व होता है, बिल्कुल स्थिति है और / या ब्लॉक तत्व है

शब्द ब्रेक

यह संपत्ति शब्दों के भीतर लाइन ब्रेकिंग व्यवहार को नियंत्रित करती है। यह उन मामलों में विशेष रूप से उपयोगी होता है जहां एक तत्व के भीतर कई भाषाओं का उपयोग किया जाता है

इस भ्रम से बचने के लिए word-wrap को overflow-wrap में बदल दिया गया है।

अब यह है कि हमारे पास क्या है:

ओवरफ़्लो- चादर

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

संभावित मान:

  • सामान्य : यह इंगित करता है कि रेखा केवल सामान्य शब्द ब्रेक पॉइंट पर टूट सकती हैं।

  • ब्रेक-शब्द : इंगित करता है कि सामान्यत: अटूट शब्दों को मनमानी बिंदुओं पर तोड़ा जा सकता है यदि लाइन में कोई अन्यथा स्वीकार्य ब्रेक पॉइंट नहीं हैं

स्रोत

शब्द-तोड़

शब्द-ब्रेक सीएसएस संपत्ति को निर्दिष्ट करने के लिए प्रयोग किया जाता है कि शब्द के भीतर लाइन को तोड़ना है या नहीं।

  • सामान्य : डिफ़ॉल्ट लाइन ब्रेक नियम का उपयोग करें
  • ब्रेक-ऑल : गैर-सीजेके (चीनी / जापानी / कोरियाई) पाठ के लिए किसी भी चरित्र के बीच शब्द टूटता डाला जा सकता है
  • रखना-सब : सीजेके पाठ के लिए शब्द टूटने की अनुमति न दें। गैर-सीजेके पाठ व्यवहार सामान्य के समान है

स्रोत


अब आपके प्रश्न पर, अतिप्रवाह-लपेट और शब्द-ब्रेक के बीच मुख्य अंतर यह है कि सबसे पहले एक अतिप्रवाह परिस्थिति पर व्यवहार निर्धारित करता है, जबकि बाद में एक सामान्य स्थिति (कोई अतिप्रवाह) पर व्यवहार निर्धारित नहीं करता है। एक अतिप्रवाह स्थिति तब होती है जब कंटेनर में पाठ को रखने के लिए पर्याप्त स्थान नहीं होता है। इस स्थिति पर लाइनों को तोड़ने में मदद नहीं करता क्योंकि इसमें कोई जगह नहीं है (ठीक चौड़ाई और ऊंचाई के साथ एक बॉक्स की कल्पना करो)।

इसलिए:

  • overflow-wrap: break-word : ओवरफ़्लो स्थिति पर, शब्दों को तोड़ें।
  • word-break: break-all : सामान्य स्थिति में, बस लाइन के अंत में शब्दों को तोड़ना एक अतिप्रवाह आवश्यक नहीं है

संबंधित डब्लू 3 विनिर्देशों से – संदर्भ की कमी के कारण जो स्पष्ट रूप से स्पष्ट नहीं होता है- एक निम्न का पता लगा सकता है:

  • word-break: break-all सीजेके (चीनी, जापानी या कोरियाई) चरित्र लेखन में विदेशी, गैर-सीजेके (पश्चिमी शब्दों का कहना है) को तोड़ने के लिए है।
  • word-wrap: break-word गैर-मिश्रित शब्दों में शब्द तोड़ने के लिए है (हम पूरी तरह से पश्चिमी भाषा कहते हैं) भाषा

कम से कम, ये डब्लू 3 के इरादे थे। वास्तव में क्या हुआ, परिणामस्वरूप ब्राउज़र असंगतियों के साथ एक बड़ा कॉक-अप हुआ। यहां विभिन्न समस्याओं को शामिल किया गया है जिसमें से बहुत कुछ लिखा गया है

निम्नलिखित कोड स्निपेट एक संक्षिप्त ब्राउज़र परिवेश में सीएसएस का इस्तेमाल करते हुए शब्द लपेटने के तरीके के सारांश के रूप में काम कर सकते हैं:

 -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-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> 

पिछले टिप्पणियों के अतिरिक्त word-wrap लिए ब्राउज़र समर्थन word-break लिए थोड़ा बेहतर लगता है।