मैं इनलाइन तत्व में लाइन ब्रेक से कैसे बच सकता हूं?

Question

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

तो मेरा सवाल यह है कि, मैं लाइनों को तोड़ने से कैसे बच सकता हूं? शायद मैं   (नो-स्पेस कैरेक्टर) के साथ प्रत्येक स्थान को प्रतिस्थापित कर सकता हूं, लेकिन क्या यह हासिल करने का एक अलग तरीका है?

Answer 1

आप

white-space: nowrap 

साथ ली स्टाइल की कोशिश की?

Answer 2

निम्नलिखित CSS जोड़ने तोड़ने से लाइन नहीं कर पाएगा:

li { 
    white-space: nowrap; 
} 

Answer 3

वहाँ एक उपयोगिता सीएसएस वर्ग text-nowrap है। आप के उपयोगिता अनुभाग में पा सकते हैं।

<div style="width: 10px"> 
    <span class="text-nowrap">This line will not break, ever....!!!</span> 
</div> 

Answer 4

इसके अलावा एम.के. के जवाब देने के लिए, बूटस्ट्रैप उपयोगिता वर्ग text-nowrap इसके चारों ओर white-space: nowrap जो मतलब है कि इस वर्ग के अंदर किसी भी पाठ एक नई लाइन पर तोड़ नहीं होगा लागू होता है। यह उपयोगी हो सकता है लेकिन उत्तरदायी कोड डिजाइन करते समय भी दर्दनाक हो सकता है।

आप पाठ है कि आप नहीं तोड़ चाहते हैं का एक टुकड़ा है, तो यह एक अच्छी आदत है पेरेंट तत्व के बजाय इस के आसपास लपेट रहे हैं:

<div class="container"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in odio 
     <span class="text-nowrap">lobortis,</span> 
     condimentum ipsum in, vulputate felis. 
    </p> 
</div>