हाइफन के बाद कोई लाइन-ब्रेक नहीं

340

मैं -केस-दर-मामला आधार पर एक हाइफ़न के बाद लाइन ब्रेक को रोकने के लिए देख रहा हूं जो सभी ब्राउज़रों के साथ संगत है।

उदाहरण:

मेरे पास यह पाठ है: 3-3/8"जो HTML में है: 3-3/8”

समस्या यह है कि एक पंक्ति के अंत के पास, हाइफ़न के कारण, यह टूट जाता है और इसे पूर्ण शब्द की तरह व्यवहार करने के बजाय अगली पंक्ति में लपेटता है ...

3-
3/8"

मैं "शून्य चौड़ाई नहीं तोड़ चरित्र" डालने की कोशिश की है, कोई भाग्य के साथ ...

3-&#65279;3/8&rdquo;

मैं इसे सफारी में देख रहा हूं और सोच रहा हूं कि यह सभी ब्राउज़रों में समान होगा।

निम्नलिखित मेरे doctypeऔर चरित्र एन्कोडिंग है ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

क्या कोई तरीका है जिससे मैं हाइफ़न के बाद लाइन-ब्रेकिंग से बचा सकता हूँ? मुझे पूरे पृष्ठ पर लागू होने वाले किसी भी समाधान की आवश्यकता नहीं है ... सिर्फ एक चीज जो मैं आवश्यक रूप से सम्मिलित कर सकता हूं, जैसे "शून्य चौड़ाई कोई विराम वर्ण", एक को छोड़कर जो काम करता है।

यहाँ एक डेमो है। बस हाइफन पर लाइन टूटने तक फ्रेम को संकरा बनाएं।

http://jsfiddle.net/RagKH/

— स्पार्की
स्रोत

@EricLeschinski, कि पहले से ही एक जवाब के रूप में पोस्ट किया गया है: stackoverflow.com/a/12362315/594235

— स्पार्की

Charset = utf-8 के साथ आप इसमें डाल सकते हैं - एक गैर ब्रेकिंग हाइफ़न

— QuentinUK

@QuentinUK, सही है ... कि पहले से ही स्वीकृत जवाब नहीं है? ‑एक गैर-तोड़ने वाला हाइफ़न है।

— स्पार्कली

& # 8209; सामान्य ASCII है, इसलिए utf-8 आवश्यक नहीं है। पृष्ठ के utf-8 एन्कोडिंग के साथ इसे वास्तविक वर्णों में रखना संभव है। - जैसा है वैसा चरित्र नहीं है - यद्यपि यह समान दिखता है।

— क्वेंटिनुक

आपके द्वारा लिखे गए के लिए सही HTML, 3-3/8″या होगा 3-3/8″। कोट्स प्राइम्स नहीं हैं। यदि आप इसे शुद्ध ASCII में चाहते हैं, तो इसके बजाय सीधे डबल कोट्स का उपयोग करें ( ")। अधिमानतः, यदि यह अच्छा, सुपाठ्य पाठ के रूप में प्रस्तुत किया जा रहा है, तो आप इसके बजाय 33/8</style>″'3

— Man

579

गैर-ब्रेकिंग हाइफ़न का उपयोग करने का प्रयास करें ‑। मैंने आपके jsfiddle में उस चरित्र के साथ डैश को बदल दिया है, फ्रेम को नीचे की तरफ छोटा कर दें क्योंकि यह जा सकता है, और लाइन वहां किसी भी अधिक नहीं विभाजित होती है।

— CanSpice
स्रोत

10

मुझे लगा कि यह नॉन-ब्रेकिंग स्पेस की तरह है, इसलिए मैंने सिर्फ 'नॉन-ब्रेकिंग डैश' की खोज की, और यहां समाप्त हुआ । :-)

— कैनस्पिस

आह ... मैंने "नो ब्रेक कैरेक्टर" सर्च किया और उसी के साथ दीवार पर हिट किया । यह मेरे लिए कभी नहीं हुआ कि एक स्टैंड-अलोन हाइफन कैरेक्टर था जो टूटेगा नहीं।

— स्पार्की

6

IE8 / 9 में यह चरित्र एक विशिष्ट हाइफ़न की तुलना में अधिक लंबा है। यह एन-डैश के समान आकार का प्रतीत होता है।

— म्रतशर्मन

21

परिणाम सामान्य हाइफ़न से भिन्न हो सकता है इसका कारण यह है कि कई फोंट में गैर-ब्रेकिंग हाइफ़न शामिल नहीं है। यह ब्राउज़र को एक अलग फ़ॉन्ट का उपयोग करने के लिए मजबूर करता है, और जबकि गैर-ब्रेकिंग हाइफ़न उस फ़ॉन्ट में सामान्य हाइफ़न के समान दिखता है , इस बात की कोई गारंटी नहीं है कि यह एक अलग फ़ॉन्ट से एक सामान्य हाइफ़न से मेल खाता है।

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

5

मुझे लगता है कि देब का जवाब सबसे अच्छा है।

— रे चेंग

256

आप संबंधित पाठ को भी लपेट सकते हैं

<span style="white-space: nowrap;"></span>

— लोगों के सामने पहली उपस्थिति करनेवाली
स्रोत

17

हां, यह स्वीकार किए गए एक इम्हो की तुलना में बेहतर उत्तर है। धन्यवाद @ डिब।

— CMH

38

@CMH यह मदद नहीं करता है यदि आप व्हाट्सएप (रिक्त स्थान जहां उपयोगकर्ता सफेद स्थान देखता है - कुछ भी नहीं) को लपेटना चाहते हैं, लेकिन आप हाइफ़न के साथ शब्दों को विभाजित नहीं करना चाहते हैं, जैसे शब्द "ई-मेल"। स्वीकृत उत्तर इस मामले में मदद करता है

— xmojmr

12

उस स्थिति में आप केवल "ई-मेल" के आसपास ही स्पैन का उपयोग कर सकते हैं।

— गुर्गो

3

@ सीएमएच, यह एक अच्छा जवाब है जो काम भी करता है, इसलिए मैंने इसे वोट दिया। हालाँकि, मैंने इस उत्तर को स्वीकार नहीं करने का फैसला किया क्योंकि मैंने एक ऐसे चरित्र के लिए कहा था जो अगली पंक्ति में स्वचालित रूप से नहीं टूटेगा। तथ्य यह है कि एक "गैर-ब्रेकिंग हाइफ़न" ( ‑) कुछ ब्राउज़रों में एक नियमित हाइफ़न की तुलना में थोड़ा अधिक समय तक प्रस्तुत कर सकता है, मेरे लिए तुच्छ था।

— स्पार्की

11

@ अलग-अलग वर्णों के उपयोग के साथ एक समस्या यह है कि यह खोज परिणामों को गड़बड़ कर देता है। पृष्ठ पर "3-3 / 8" खोजने की कोशिश करने से गैर-सम्मोहक हाइफ़न नहीं मिलेगा।

— श्री लिस्टर

23

IE8 / 9 एक विशिष्ट हाइफ़न की तुलना में कैनस्पिस के उत्तर में उल्लिखित गैर-ब्रेकिंग हाइफ़न को प्रस्तुत करता है। यह एक विशिष्ट हाइफ़न के बजाय एक एन-डैश की लंबाई है। यह प्रदर्शन अंतर मेरे लिए एक डील ब्रेकर था।

जैसा कि मैं डेब I द्वारा निर्दिष्ट सीएसएस उत्तर का उपयोग नहीं कर सकता था बजाय इसके कि कोई ब्रेक टैग का उपयोग करने का विकल्प चुना।

<nobr>e-mail</nobr>

इसके अलावा मुझे एक विशिष्ट परिदृश्य मिला जिसके कारण IE8 / 9 एक हाइफ़न पर टूट गया।

एक स्ट्रिंग में गैर-ब्रेकिंग स्पेस द्वारा अलग किए गए शब्द होते हैं -  
चौड़ाई सीमित है
एक पानी का छींटा शामिल है

IE इसे इस तरह प्रस्तुत करता है।

IE8 / 9 में हाइफ़न ब्रेकिंग का उदाहरण

निम्न कोड ऊपर चित्रित समस्या को पुन: पेश करता है। IE9 को समस्या को ठीक करने के लिए मुझे IE9 को प्रस्तुत करने के लिए एक मेटा टैग का उपयोग करना पड़ा। कोई फिडल नहीं क्योंकि यह मेटा टैग का समर्थन नहीं करता है।

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

— mrtsherman
स्रोत

6

उपयोग करना nobrसबसे क्रॉस-ब्राउज़र तरीका है और स्वतंत्र रूप से फोंट और सीएसएस पर काम करता है। nobrतत्व एचटीएमएल चश्मा में निर्धारित नहीं है, लेकिन यह केवल एक औपचारिकता के रूप में माना जाना चाहिए। लेकिन अगर आपको HTML स्पेक्स द्वारा लिखना होगा , तो देब का जवाब, CSS का उपयोग करना, सबसे अच्छा विकल्प है।

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

5

मैं उत्सुक हूं कि आप सीएसएस समाधान का उपयोग क्यों नहीं कर सके।

— रयान अहर्ने

2

@RyanAhearn - मैं एक तृतीय पक्ष उपकरण का उपयोग कर रहा हूं जो मुझे html पर अधिक नियंत्रण नहीं देता है। यह इनलाइन टैग घोषणाओं का समर्थन नहीं करता है।

— मृत्समन

'' के बजाय आप केवल एक वर्ग के साथ एक स्पैन का उपयोग नहीं कर सकते थे और इसे सीएसएस का उपयोग करके नियंत्रित कर सकते थे?

— स्टीफनसेक

1

ध्यान दें कि nobrटैग अमानक है और किसी भी समय टूट सकता है। MDN प्रलेखन इस टैग का उपयोग करने की अनुशंसा नहीं करता है: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Philipp

16

आप इसे " जॉइनर तरीका" भी कर सकते हैं " वर्ड जॉइनर " डालकरU+2060 " ।

यदि Accept-Charsetपरमिट होता है, तो यूनिकोड चरित्र को सीधे डाला जा सकता है HTML आउटपुट में ।

अन्यथा, यह इकाई एन्कोडिंग का उपयोग करके किया जा सकता है। पाठ में शामिल होने के लिए red-brown, उपयोग करें:

red-&#x2060;brown

या (दशमलव समतुल्य):

red-&#8288;brown

। एक और प्रयोग करने योग्य चरित्र है " U+FEFFशून्य चौड़ाई नो-ब्रेक स्पेस " ^{^{[⁠ ]1]}} :

red-&#xfeff;brown

और (दशमलव समतुल्य):

red-&#65279;brown

^{[१] : ध्यान दें कि जबकि यह विधि अभी भी क्रोम जैसे प्रमुख ब्राउज़रों में काम करती है, यूनिकोड ३.२ के बाद से इसे हटा दिया गया है ।}

" U+2011नॉन-ब्रेकिंग हाइफ़न " के साथ "जॉइनर तरीका" की तुलना :

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

abcdefghijklmnopqrstu-vwxyz

सामान्य हाइफ़न के प्रतिपादन के समान है (U + 2060 वर्ड जॉइनर के साथ), उदाहरण के लिए:

एक-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠r-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

जबकि उपरोक्त दोनों रेंडर " नॉन-ब्रेकिंग हाइफ़न " के प्रतिपादन से भिन्न हैं , उदाहरण के लिए:

एक-बी-सी-डी-ए-च-ग-ज-ए-जे-के-एल-एम-एन-ओ-पी-q-आर एस टी यू-वी-डब्ल्यू-एक्स-y- z

। (अंतर की सीमा ब्राउज़र-निर्भर और फ़ॉन्ट-निर्भर है। जैसे arial",", फ़ायरफ़ॉक्स और IE11 के फ़ॉन्ट घोषणा का उपयोग करते समय। क्रोम और ओपेरा अपेक्षाकृत छोटे बदलाव दिखाते हैं।)

(CSS .c1 {white-space:nowrap;}) के साथ "जॉइनर वे" की तुलना और :

जॉइनर शब्द का उपयोग उन स्थितियों के लिए किया जा सकता है जहां HTML टैग का उपयोग प्रतिबंधित है, उदाहरण के लिए वेबसाइटों और मंचों के रूप।
प्रस्तुति और सामग्री के स्पेक्ट्रम पर , बहुमत टैग से तुलना करने पर शब्द जॉइनर को सामग्री के करीब माना जाएगा।

^{• विंडोज 8.1 कोर 64-बिट पर परीक्षण के रूप में:

    • IE 11.0.9600.18205

    • फ़ायरफ़ॉक्स 43.0.4

    • क्रोम 48.0.2564.109 (आधिकारिक बिल्ड) m (32-बिट)

    • ओपेरा 35.0.2066.92}

— Pacerier
स्रोत

ऐसा लगता है कि "U + FEFF जीरो चौड़ाई नो-ब्रेक स्पेस" IE11 में सही ढंग से काम नहीं करता है।

— इवान गुसेव

ऐसा लगता है कि "यू + 2060" काम नहीं करता है अगर "-" कुछ यूनिकोड चार द्वारा पीछा किया जाता है: इस तरहbingo-⁠bongo

— इवान गुसेव

लगातार नकारात्मक दबाव के बावजूद

— जेम्सविलसन

6

पार्टी के लिए देर से, लेकिन मुझे लगता है कि यह वास्तव में सबसे सुरुचिपूर्ण है। शब्द जोर्ड यूनिकोड चरित्र का उपयोग करें & # 8288 ; अपने हाइफ़न, या एम डैश, या किसी भी वर्ण के दोनों ओर।

तो, जैसे:

&#8288;—&#8288;

यह दोनों सिरों पर अपने पड़ोसियों (बिना किसी स्थान को जोड़े) के प्रतीक को जोड़ेगा और लाइन ब्रेकिंग को रोकेगा।

— Eckstein
स्रोत

मैं विंडोज़ 10 पर किसी कारण से ALT + 0173 (सॉफ्ट हाइफ़न) का उपयोग करके इसे प्राप्त करने में सक्षम था

— pspahn