ओवरफ्लो-रैप और वर्ड-ब्रेक के बीच अंतर?

Question

overflow-wrap/ word-wrapऔर के बीच सटीक अंतर क्या है word-break? और क्या कोई मुझे बता सकता है कि बहुत लंबे लिंक को तोड़ने के लिए बेहतर क्या है? अधिकांश लोग कहते हैं कि आपको संयोजन के साथ शब्द-विराम का उपयोग करना चाहिए overflow-wrapलेकिन यह बहुत तार्किक नहीं लगता है। मुझे लगता है कि बेहतर क्रॉस-ब्राउज़र समर्थन के लिए overflow-wrapसंयोजन का उपयोग word-wrapकरना सबसे अच्छा तरीका है। तुम क्या सोचते हो?

Comments

किसी भी भविष्य के पाठकों के लिए जो शुरू में भ्रमित हो सकते हैं कि यह एक डुप्लिकेट प्रश्न के रूप में क्यों बंद किया गया था। सीएसएस पाठ मॉड्यूल स्तर 3 कहा गया है कि overflow-wrapऔर word-wrap100% कार्यक्षमता में समान होना चाहिए। व्यक्तिगत रूप से, मुझे यह धारणा मिलती है कि word-wrapइसका उपयोग केवल लीगेसी ब्राउज़र समर्थन के लिए किया जाना चाहिए और यह सीएसएस के भविष्य के संस्करण में पदावनत या गिराया जा सकता है।

— टायलर क्रॉम्पटन

जिन लोगों ने इसे बंद करने के लिए मतदान किया था: यह एक डुप्लिकेट नहीं है जैसा कि कहा गया है, प्रश्न समान नहीं है। कथित डुप्लिकेट दो संपत्तियों के दो विशिष्ट मूल्यों के बारे में है और यह प्रश्न दो गुणों के बारे में है। मैं वास्तव में नापसंद करता हूं कि कुछ लोग दूसरों को एक सवाल का जवाब देने से मना करने का अधिकार मानते हैं। यदि आपको कोई प्रश्न पसंद नहीं है, तो इसे न पढ़ें!

— हिबू ५ou

@ टायलर क्रॉम्पटन आप के word-wrapसाथ भ्रमित कर रहे हैंword-break

— catamphetamine

मैं Hibou57 से सहमत हूं। यह कोई डुप्लिकेट नहीं है। यह दुर्भाग्यपूर्ण है कि यह बंद है क्योंकि इस प्रश्न का उत्तर ऑनलाइन खोजना मुश्किल है।

— पॉल-हेबर्ट

@TylerCrompton यह सवाल नहीं है word-wrap। इस बारे में है word-break। डुप्लिकेट प्रश्न के रूप में इसे बंद करने का कोई मतलब नहीं है।

— लोन लर्नर

Answer 1

स्रोत से उद्धृत

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

• ओवरफ्लो-रैप : CSS3 पाठ विनिर्देश के वर्तमान मसौदे में word-wrapसंपत्ति का नाम बदल दिया गया हैoverflow-wrap

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

तो, आपको वर्ड-रैप के संयोजन में शब्द-विराम की आवश्यकता है, जो सही संयोजन है।

Comments

खैर, हां word-wrapपर्याप्त है, लेकिन अगर कंटेनर की चौड़ाई सीमित है, तो लेआउट गड़बड़ हो सकता है।

— कार्तिक

ठीक है मैं समझा। मैं केवल लिंक के लिए वर्ड-रैप का उपयोग करता हूं, इसलिए लेआउट नहीं टूटता है।

— एसेलम

एक उत्तर मिला: "W3 विनिर्देश जो इन के बारे में बात करता है, वह शब्द-विराम का सुझाव देता है: ब्रेक-ऑल CJK पाठ के साथ एक विशेष व्यवहार की आवश्यकता के लिए है, जबकि शब्द-रैप: ब्रेक-वर्ड अधिक सामान्य, गैर- CJK- है सजग, व्यवहार। " ( stackoverflow.com/questions/1795109/… ) CJK चीनी, जापानी और कोरियाई के लिए एक सामूहिक शब्द है।

— एसेलम

ओह। लेकिन मुझे लगा कि आपका सवाल बिल्कुल अलग था। वैसे भी, खुशी है कि आप अपने जवाब मिल गया, और मुझे विश्वास है कि मैं थोड़ी मदद की थी

— कार्तिक

वर्ड-रैप एक अप्रचलित Microsoft एक्सटेंशन है (भले ही इसे अधिकांश ब्राउज़रों द्वारा एक अविभाजित संपत्ति के रूप में लागू किया गया था) और अब इसे ओवरफ़्लो-रैप द्वारा बदल दिया गया है। MDN ने दो अलग-अलग पृष्ठों को एक में मिला दिया: developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

— CharlesM

Answer 2

यह समझने में मदद करता है कि इस बिंदु पर, word-break: break-wordवास्तव में इसके लिए एक उपनाम है overflow-wrap: anywhere।

word-break: break-wordआधिकारिक तौर पर पदावनत किया गया है; देख सीएसएस पाठ मॉड्यूल स्तर 3 कार्यकारी ड्राफ्ट :

विरासत सामग्री के साथ संगतता के लिए, word-breakसंपत्ति एक पदावनत break-wordकीवर्ड का भी समर्थन करती है । जब निर्दिष्ट किया जाता है , तो ओवरफ्लो-रैप संपत्ति के वास्तविक मूल्य की परवाह किए बिना, इसका एक ही प्रभाव होता है word-break: normalऔर overflow-wrap: anywhere।

यहां ध्यान देने वाली बात यह है कि इसके word-break: break-wordलिए एक उपनाम है overflow-wrap: anywhere, के लिए एक अन्य नहीं हैoverflow-wrap: break-word ।

( word-break: normalकेवल इसके लिए डिफ़ॉल्ट मान है word-break, इसलिए आप इसे तब तक अनदेखा कर सकते हैं जब तक आप के लिए एक अलग मान सेट नहीं कर रहे हैं word-break।

कैसे overflow-wrap: anywhereऔर overflow-wrap: break-wordअलग हो?

दोनों के बीच दस्तावेज़ीकरण में एकमात्र अंतर overflow-wrap: anywhereयह है कि शब्द "ब्रेक द्वारा शुरू किए गए सॉफ्ट रैप अवसरों पर विचार करता है" जब यह "मिन-कंटेंट आंतरिक आकारों की गणना" overflow-wrap: break-wordकरता है , जबकि ऐसा नहीं होता है।

मुझे लगता है कि चौड़ाई कुछ मामलों में अधिक सटीक हो सकती है यदि यह उन पर विचार कर रहा है?

Answer 3

यहाँ सटीक अंतर हैं: (क्रोम v81 में परीक्षण के आधार पर, और युक्ति को संदर्भित करके मेरी टिप्पणियों की पुष्टि)

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

normal(डिफ़ॉल्ट): व्हाट्सएप-चेन और लाइन-ब्रेक को ध्वस्त करता है; जहाँ आवश्यक हो लाइन-ब्रेक जोड़ता है
nowrap: व्हाट्सएप-चेन और लाइन-ब्रेक को ध्वस्त करता है; लाइन-ब्रेक नहीं जोड़ता
pre-line: व्हाट्सएप-चेन को ध्वस्त करता है; जहां आवश्यक हो, लाइन-ब्रेक जोड़ता है
pre-wrap: कोई पतन नहीं; जहाँ आवश्यक हो
break-spaces, लाइन-ब्रेक जोड़ता है
pre: लाइन-ब्रेक-ऐड को ट्रिगर करने में सक्षम स्थानों के अलावा, पूर्व-रैप के समान : कोई ढहने वाला नहीं; लाइन-ब्रेक नहीं जोड़ता है

नोट: यदि चयनित white-spaceमूल्य सूचियाँ "लाइन-ब्रेक नहीं जोड़ती हैं", तो निम्न गुणों का लाइन-ब्रेक व्यवहार लागू नहीं किया जा सकता है (अर्थात अनदेखा किया गया)।

शब्द-विराम

normal(डिफ़ॉल्ट): कंटेनर के भीतर अंतिम शब्द फिटिंग के अंत में लाइन को तोड़ता है [यदि कोई मौजूद है], तो दूसरी लाइन को छोड़ दिया गया है
break-word: कंटेनर के भीतर अंतिम शब्द फिटिंग के अंत में लाइन को तोड़ता है [यदि कोई मौजूद है], तो कंटेनर के अंत में
break-all: लाइन को तोड़ता है कंटेनर का अंत [पास के व्हाट्सएप के साथ भी एक शब्द को विभाजित कर सकता है]

अतिप्रवाह-लपेट (विरासत का नाम: शब्द-लपेट)

normal(डिफ़ॉल्ट): कंटेनर के भीतर अंतिम शब्द फिटिंग के अंत में लाइन को तोड़ता है [यदि कोई मौजूद है], तो दूसरी पंक्ति को छोड़ दिया गया है
break-word: कंटेनर के भीतर अंतिम शब्द फिटिंग के अंत में लाइन को तोड़ता है [यदि कोई मौजूद है], तो कंटेनर के अंत में [गैर में] -फ्लेक्स कंटेनर], दूसरी लाइन अटूट रह गई
anywhere: कंटेनर के भीतर अंतिम शब्द फिटिंग के अंत में ब्रेक लाइन [यदि कोई मौजूद है], तो कंटेनर के अंत में [इतना ही word-break: break-word]

ध्यान दें कि overflow-wrap: break-word(किसी भी संयोजन के लिए जो कंटेनर के लिए बहुत लंबी लाइनें छोड़ता है), अखंड रेखा एक फ्लेक्स कंटेनर को फ्लेक्स अनुपात से परे विस्तारित करने का कारण बन सकती है (अन्य फ्लेक्स कंटेनरों को बहुत लंबी सामग्री के लिए खाते में सिकोड़ने के लिए मजबूर करना)।

Comments

इस तथ्य के आधार पर आपने कहा "डॉक्स पर आधारित" मैं मान रहा हूं कि यह सामग्री काफी हद तक कहीं से कॉपी की गई है? एसओ आमतौर पर ऐसी सामग्री पर ध्यान केंद्रित करता है जो कहीं और केवल सामग्री की एक शुद्ध प्रति है, लेकिन या तो आपको साहित्यिक चोरी से बचने के लिए सामग्री की नकल करते समय स्रोतों का हवाला देना चाहिए । इसके अलावा, क्रोम में परीक्षण शायद ही इस बात के लिए एक स्रोत के रूप में विश्वसनीय है कि क्या कुछ इस बात के अनुरूप है कि कल्पना कैसे कहती है।

— टायलरएच

@TylerH यह (कहीं और भी) सामग्री की शुद्ध प्रति के करीब नहीं है। अधिकांश व्यवहार विवरण क्रोम में मेरे प्रत्यक्ष परीक्षण से थे, डॉक्टर पृष्ठों के संदर्भ के साथ सिर्फ यह पुष्टि करने के लिए कि मैंने जो व्यवहार देखा था वह कल्पना के साथ गठबंधन किया गया था, और यह सुनिश्चित करने के लिए कि मुझे अतिरिक्त व्यवहार याद नहीं है। साहित्यिक चोरी से दूर रोना। (मैं स्पष्ट करने के लिए शीर्ष पर नोट को अपडेट करूंगा)

— वेनरिक्स

एक सच्चे गंभीर और धैर्यवान पाठक के लिए जो वास्तव में सब कुछ समझना चाहता है, यह सबसे अच्छा जवाब है। बहुत बहुत धन्यवाद।

— ZYinMD