सीएसएस का उपयोग करके सूची आइटम में लाइन ब्रेक को कैसे रोका जाए

513

मैं एक टैग का उपयोग करके मेनू में सबमिट रिज्यूमे नामक एक लिंक डालने की कोशिश कर रहा हूं li। दो शब्दों के बीच व्हॉट्सएप की वजह से यह दो लाइनों से जुड़ जाता है। CSS के साथ इस रैपिंग को कैसे रोकें?

html css word-wrap

— Rajasekar
स्रोत

969

white-space: nowrap;^{[1] [२] का} प्रयोग करें या उस लिंक liको अधिक मानों की चौड़ाई निर्धारित करके अधिक स्थान दें ।

^{[१] 1} 3. व्हाइट स्पेस और रैपिंग: व्हाइट-स्पेस प्रॉपर्टी - W3 CSS टेक्स्ट मॉड्यूल लेवल 3
^[2] व्हाइट-स्पेस - CSS: कैस्केडिंग स्टाइल शीट्स | MDN

— n1313
स्रोत

41

आपको उस खतरनाक और अक्सर गलत w3schools वेबसाइट के बजाय W3C का संदर्भ देना चाहिए। w3.org/TR/css3-text/#white-space0

— सेबस्टियन मार्टिन

53

या सिर्फ मोज़िला डेवलपर के नेटवर्क डेवलपर.

— mozilla.org/en-US/docs/CSS/CSS_Reference

4

मैंने ली वस्तुओं के उपयोग से लाइन ब्रेक को रोका display: inline;। शायद यह भी इसी तरह की समस्याओं के साथ दूसरों की मदद करेगा।

इसका प्रदर्शन के साथ सावधान रहना महत्वपूर्ण है: इनलाइन क्योंकि इसके दुष्प्रभाव हो सकते हैं। श्वेत-स्थान: Nowrap; केवल एक ही प्रभाव है।

— क्रिस्पेन स्मिथ

इस स्थिति में पाठ अतिप्रवाह होता है। इसे कैसे रोका जाए?

147

यदि आप एक पंक्ति में फिट होने के लिए सामग्री बड़ी है, तो आप लाइन के इस छोटे स्निपेट को एक अच्छा "..." जोड़ सकते हैं:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

— JimmyRare
स्रोत

मैं एक पाठ क्लैम्पिंग समाधान की तलाश कर रहा था, लेकिन मैं इस समाधान पर

— टिक जाऊंगा

33

यदि आप इसे चुनिंदा रूप से प्राप्त करना चाहते हैं (अर्थात: केवल उस विशेष लिंक के लिए), तो आप सामान्य स्थान के बजाय गैर-ब्रेकिंग स्थान का उपयोग कर सकते हैं:

<li>submit&nbsp;resume</li>

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

संपादित करें: मैं समझता हूं कि यह HTML है, न कि CSS जो कि ओपी द्वारा अनुरोध किया गया है, लेकिन कुछ इसे मददगार हो सकते हैं ...

— ptim
स्रोत

14

प्रदर्शन: इनलाइन-ब्लॉक; एक सूची आइटम में शब्दों के बीच विराम को रोक देगा

 li {
    display: inline-block;
 }

— नादेश पीरिस
स्रोत

1

अगर मैं jsfiddle के माध्यम से क्लिक करता हूं और आउटपुट की चौड़ाई को समायोजित करता हूं, तो व्यक्तिगत सूची आइटम "सूची" और संख्या के बीच टूट जाती है, जो कि ओपी नहीं चाहता है ...

— GentlePurpleRain

4

बूटस्ट्रैप 4 में एक वर्ग है जिसका नाम है text-nowrap। यह वही है जो आपको चाहिए।

— येवगेनी अफनासयेव
स्रोत

2

मैं 2019 में बूटस्ट्रैप के उपयोग से बचने की सलाह देना चाहता हूं।

— बड़ौदा नोएल

2

@ बड़ौदा नोएल क्यों?

— येवगेनी अफनासियेव