सभी ब्राउज़रों पर हाइफ़न पर लाइन ब्रेक को कैसे रोकें

Question

हम अपने CMS पर एक ckeditor है। हमारे अंतिम उपयोगकर्ता उस ckeditor के माध्यम से कुछ लंबे लेखों को इनपुट करेंगे। हमें उन लेखों पर हाइफ़न पर लाइन ब्रेक को रोकने का एक तरीका चाहिए।

वहाँ वैसे भी सभी ब्राउज़रों पर हाइफ़न पर लाइन ब्रेक को रोकने के लिए है?

या ckeditor को रोकने के लिए एक विकल्प है?

Comments

आप स्वीकार किए गए उत्तर को बदलने पर विचार कर सकते हैं क्योंकि वर्तमान स्वीकार किए गए उत्तर में एक अस्वीकृत समाधान है

— अकार्बनिक

Answer 1

मुझे डर है कि पाठ को "शब्द" (व्हॉट्सएप द्वारा अलग किए गए गैर-व्हाट्सएप वर्णों के अनुक्रम) में विभाजित करने और प्रत्येक "शब्द" को लपेटने से बेहतर है, जिसमें nobrमार्कअप के अंदर एक हाइफ़न होता है । इसलिए इनपुट डेटा bla bla foo-bar bla blaको चालू कर दिया जाएगाbla bla <nobr>foo-bar</nobr> bla bla ।

nobrजब भी "शब्द" में अक्षरों और अंकों के अलावा कुछ भी हो, आप मार्कअप डालने पर विचार कर सकते हैं । कारण यह है कि कुछ ब्राउज़र "2/3" या "f (0)" जैसे तार भी तोड़ सकते हैं ( ब्राउज़रों में लाइन तोड़ने की विषमताओं पर मेरा पृष्ठ देखें )।

Comments

nobrटैग मानक नहीं है, और दृढ़ता से W3C द्वारा हतोत्साहित किया है। W3.org/TR/html5/obirect.html#non-conforming-features

— derekerdmann

किसी भी अन्य दृष्टिकोण के विपरीत, nobrमार्कअप सभी ब्राउज़रों पर काम करता है, तब भी काम करता है जब स्टाइलशीट अक्षम हो जाती है, और विशेष वर्णों के समर्थन में स्वतंत्र रूप से काम करती है। क्या इसके साथ कोई वास्तविक समस्या है?

— जुक्का के। कोर्पेला

क्यों नहीं <span style = "white-space: nowrap"> </ span>?

— ब्रेंडन बायर

@ JukkaK.Korpela इसके साथ मुद्दा यह है कि आधुनिक ब्राउज़र इसके लिए समर्थन छोड़ने का फैसला कर सकते हैं, और HTML विनिर्देश का उल्लंघन किए बिना ऐसा कर सकते हैं। यह एक "चाहिए" सुविधा है, जिसे लागू करने के लिए केवल एक सुझाव दिया गया है। स्टाइलशीट के संबंध में, यदि किसी उपयोगकर्ता के पास स्टाइल शीट अक्षम है, तो वे किसी भी शैली के नहीं होने की उम्मीद करते हैं

— mirhagk

मैं 10 वर्षों से साइटें विकसित कर रहा हूं और आपको यह भी पता नहीं है कि आप अपने ब्राउज़र में स्टाइलशीट को निष्क्रिय कर सकते हैं। यह वास्तव में कौन करता है (उन लोगों से अलग जो इस दिन और उम्र में डिफ़ॉल्ट रूप से जावास्क्रिप्ट को अक्षम करने के आत्म-ध्वज के लिए चुनते हैं)? अगर हमें ऐसा करने की आवश्यकता है, तो प्रस्ताव पर वैकल्पिक समाधान कहां है?

— जॉन रिक्स

Answer 2

आप उपयोग कर सकते हैं ‑ जो एक यूनिकोड एनओएन-ब्रेकिंग हाइफ़न (यू + 2011) है।

HTML: ‑ या‑

इसे भी देखें: http://en.wikipedia.org/wiki/Hyphen#In_computing

Comments

आपके उत्तर के लिए बहुत बहुत धन्यवाद। लेकिन हमें जो करने की आवश्यकता है वह ckeditor पर लाइन ब्रेक को रोकने के लिए है जहां सभी सामग्री अंत उपयोगकर्ताओं द्वारा दर्ज की जाएगी। हम सभी को यूनिकोड गैर-ब्रेकिंग हाइफ़न में प्रवेश करने के लिए नहीं कह सकते हैं। क्या लाइन ब्रेक को रोकने का कोई और तरीका है? या ckeditor के पास हाइफन को स्वचालित रूप से परिवर्तित करने का विकल्प है? धन्यवाद फिर से

— एलन

आप एक साधारण स्ट्रिंग प्रतिस्थापन कर सकते हैं, -जिसके साथ बदल सकते हैं ‑।

— deceze

U + 2011 तक सीमित फ़ॉन्ट समर्थन से सावधान रहें, fileformat.info/info/unicode/char/2011/fontsupport.htm

— Jukka K. Korpela

हालांकि यह निश्चित रूप से सिद्धांत रूप में अधिक सुरुचिपूर्ण है, फिर nobrसभी स्थानों पर पलस्तर टैगिंग , यह व्यवहार में बहुत अच्छी तरह से काम नहीं करता है। IE इसे एक एन डैश के रूप में प्रदर्शित करता है, सफारी एक सामान्य डैश की तुलना में इसके चारों ओर अधिक स्थान जोड़ता है, और अधिकांश पाठ संपादक इसे एक प्रश्न चिह्न या बॉक्स या अन्य अर्थहीन चरित्र के रूप में प्रदर्शित करते हैं।

— Tgr करें

@ जेकव मैं derekerdmann white-space: nowrapद्वारा सुझाव के साथ जाना होगा । FF / Win7 पर Btw जब शर्मीली डैश फ़ायरफ़ॉक्स के बाहर कॉपी और पेस्ट किया जाता है, तब भी एक नियमित डैश में परिवर्तित किया जाता है, भले ही लक्ष्य एप्लिकेशन यूनिकोड-जागरूक हो।

— Tgr

Answer 3

एक समाधान एक अतिरिक्त spanटैग और white-spaceसीएसएस संपत्ति का उपयोग करने के लिए हो सकता है । बस एक वर्ग को इस तरह परिभाषित करें:

.nowrap {
    white-space: nowrap;
}

और फिर अपने हाइफन टेक्स्ट के चारों ओर उस वर्ग के साथ एक स्पैन जोड़ें।

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

यह दृष्टिकोण सभी ब्राउज़रों में ठीक काम करना चाहिए - यहां सूचीबद्ध छोटी गाड़ी कार्यान्वयन white-spaceसंपत्ति के अन्य मूल्यों के लिए हैं: http://reference.sitepoint.com/css/white-space#compatibilitysection

Comments

आपके उत्तर के लिए बहुत बहुत धन्यवाद। लेकिन हमारी पाठ सामग्री अंत उपयोगकर्ताओं द्वारा एक ckeditor के माध्यम से दर्ज की जाएगी। हम सभी को शब्द के चारों ओर <span> जोड़ने के लिए नहीं कह सकते। क्या इसे हासिल करने का कोई और तरीका है? वैसे भी धन्यवाद

— एलन

@ एलन - वे किस प्रकार की सामग्री जोड़ रहे हैं जो सम्मोहक पर टूट न सके? यदि यह एक शीर्षक या कोई अन्य तत्व है जो हमेशा एक पंक्ति में रहेगा, तो white-space: nowrapपूरे कंटेनर पर लागू करें। अन्यथा, बस इसे जाने दो; पहला, सामान्य सामग्री के लिए हाइफ़न के साथ लाइन ब्रेक को रोकने का कोई कारण नहीं है, और दूसरा, कोई भी ऐसा तरीका नहीं है जिससे आप वह कर पाएं जो आप तब तक स्वचालित रूप से प्राप्त करना चाहते हैं जब तक कि आप CKEditor पर हैक करने के लिए तैयार न हों।

— derekerdmann

ऐसी कई स्थितियाँ हैं जहाँ एक हाइफ़न के बाद एक लाइन ब्रेक ख़राब है या बहुत गलत है, जैसे कि "F-1" में या जब एक हाइफ़न का उपयोग एक प्रकार से माइनस के रूप में किया जाता है, जैसा कि "-42 °" में होता है (और लोग इसे इसी तरह से उपयोग करते हैं) चूंकि वे माइनस साइन के बारे में नहीं जानते हैं)।

— जुक्का के। कोर्पेला

यह काम करता है, लेकिन यह तथ्य कि यह काम करता है गैर-सहज ज्ञान युक्त है, क्योंकि हाइफ़न सफेद स्थान नहीं है। <nobr>बहुत साफ है।

— डेव बर्टन

Answer 4

आप प्रत्येक HTML उदाहरण को संपादित किए बिना इसे करने में असमर्थ हैं। नतीजतन, मैंने उन्हें बदलने के लिए कुछ JS लिखा:

jQuery:

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

वेनिला जेएस:

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}

Comments

मुझे यह विचार पसंद आया, क्योंकि इसमें HTML के प्रत्येक बिट को संपादित करना शामिल नहीं है जिसमें एक हाइफ़न हो सकता है। हालाँकि, मुझे संदेह है कि आप इस तरह से पूरे पृष्ठ पर प्रत्येक बिट पाठ को संसाधित करने वाले प्रदर्शन के मुद्दों में भाग ले सकते हैं, खासकर यदि बहुत सारे तत्व हैं।

— सेम बीन

Answer 5

हाइफ़न के चारों ओर जॉइनर वर्ण ( ⁠) शब्द का उपयोग करें । यह IE में भी काम करता है।

https://en.wikipedia.org/wiki/Word_joiner

विशिष्ट हाइफ़न तय करें ...

function fixicecream(text) {
    return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}

या सब कुछ ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}

Answer 6

इस सीएसएस का प्रयास करें:

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;

Comments

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है। कृपया व्याख्यात्मक टिप्पणियों के साथ अपने कोड को भीड़ने की कोशिश न करें, इससे कोड और स्पष्टीकरण दोनों की पठनीयता कम हो जाती है!

— आशीष आहूजा