स्पैन तत्व के लाइन-ब्रेक को रोकें

Question

मेरे पास एक <span>तत्व है जिसे मैं बिना किसी लाइन ब्रेक के प्रदर्शित करना चाहता हूं। मैं उसे कैसे कर सकता हूँ?

Comments

यदि आप उन्हें दबाने के लिए देख रहे हैं, तो stackoverflow.com/questions/425274/…

— amwinter

Answer 1

इसे अपने सीएसएस में रखें:

white-space:nowrap;

अधिक जानकारी यहाँ प्राप्त करें: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

white-spaceसंपत्ति कैसे तत्व के अंदर सफेद स्थान नियंत्रित किया जाता है की घोषणा की।

मान

normal यह मान उपयोगकर्ता एजेंटों को निर्देश देता है कि वे श्वेत स्थान के अनुक्रमों को ध्वस्त करें, और लाइन के बक्सों को भरने के लिए लाइनों को तोड़ दें।

pre यह मान उपयोगकर्ता एजेंटों को श्वेत स्थान के अनुक्रम को ढहने से रोकता है। स्रोत में नई लाइनों पर लाइनें उत्पन्न होती हैं, या उत्पन्न सामग्री में "ए" की घटनाओं पर।

nowrap यह मान 'सामान्य' के लिए सफेद स्थान को ढहता है, लेकिन पाठ के भीतर लाइन ब्रेक को दबा देता है।

pre-wrap यह मान उपयोगकर्ता एजेंटों को श्वेत स्थान के अनुक्रम को ढहने से रोकता है। उत्पन्न की गई सामग्री में "ए" की घटनाओं पर, और लाइन के बक्सों को भरने के लिए आवश्यक के रूप में स्रोत में नई लाइनों पर लाइनें टूट जाती हैं।

pre-line यह मान उपयोगकर्ता एजेंटों को श्वेत स्थान के अनुक्रम को ढहाने का निर्देश देता है। उत्पन्न की गई सामग्री में "ए" की घटनाओं पर, और लाइन के बक्सों को भरने के लिए आवश्यक के रूप में स्रोत में नई लाइनों पर लाइनें टूट जाती हैं।

inherit तत्व के माता-पिता के लिए संपत्ति के रूप में एक ही निर्दिष्ट मूल्य लेता है।

Comments

यहाँ कुछ और दस्तावेज़ जोड़ने के लिए भी अच्छा है: w3.org/wiki/CSS/Properties/white-space

— Justus Romijn

मामले के लिए जब आपके पास div के अंदर कई स्पैन होते हैं और आप सिंगल-लाइन स्पैन प्राप्त करना चाहते हैं लेकिन सिंगल लाइन डिव नहीं, तो आपको स्पैन में भी जोड़ना होगा: इनलाइन-ब्लॉक ;; आशा है कि यह किसी के लिए मदद करेगा।

— walv

Answer 2

यदि आपको केवल अंतरिक्ष वर्णों पर लाइन-ब्रेक को रोकने की आवश्यकता है, तो आप  शब्दों के बीच संस्थाओं का उपयोग कर सकते हैं :

No line break

के बजाय

<span style="white-space:nowrap">No line break</span>

Answer 3

white-space: nowrapसही समाधान है, लेकिन यह एक लाइन में किसी भी टूट को रोक देगा। यदि आप केवल दो तत्वों के बीच की रेखा विराम को रोकना चाहते हैं तो यह थोड़ा और जटिल हो जाता है:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

स्पैन के बीच विराम को रोकने के लिए लेकिन "कुछ" और "टेक्स्ट" के बीच विराम की अनुमति देने के लिए निम्न कार्य किए जा सकते हैं:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

फ़ायरफ़ॉक्स के लिए यह काफी अच्छा है। क्रोम में आपको अतिरिक्त रूप से स्पैन के बीच व्हाट्सएप को बदलना होगा  । (व्हाट्सएप हटाने से काम नहीं होता है।)

Answer 4

बूटस्ट्रैप 4 क्लास के साथ:

text-nowrap

रेफरी: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-watch-