HTML + CSS: div कंटेंट को एक लाइन में रहने के लिए कैसे बाध्य करें?

Question

मेरे पास divपरिभाषित के साथ एक लंबा पाठ हैwidth :

HTML:

<div>Stack Overflow is the BEST !!!</div>

सीएसएस:

div {
    border: 1px solid black;
    width: 70px;
}

मैं स्ट्रिंग को एक पंक्ति में रहने के लिए कैसे बाध्य कर सकता हूं (यानी "ओवरफ्लो" के बीच में कटौती करने के लिए)?

मैंने इस्तेमाल करने की कोशिश की overflow: hidden, लेकिन इससे कोई फायदा नहीं हुआ।

Comments

white-space: nowrapइसे अपने स्टाइल टैग में डालें।

— मोशी

Answer 1

इसे इस्तेमाल करे:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

का उपयोग करें white-space:nowrapऔरoverflow:hidden

http://jsfiddle.net/NXchy/8/

Comments

text-overflow:ellipsis;बेहतर लुक के लिए ऊपर से जोड़ें ।

— tj-recess

क्या यह बिना css के हासिल किया जा सकता है?

— निलोन

Answer 3

अपने सीएसएस उपयोग में white-space:nowrap;

Answer 4

आपका HTML कोड: <div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

अब परिणाम होना चाहिए:

ढेर ओवरफ ...

Answer 5

हर कोई इस पर कूद गया !!! मैंने भी एक बेला बनाई:

http://jsfiddle.net/audetwebdesign/kh4aR/

रॉबगर को white-space:nowrapपहले इंगित करने के लिए एक बिंदु मिलता है ।

overflow: hiddenयदि आप अपने लेआउट में अतिरिक्त पात्रों को देखना नहीं चाहते हैं, तो यहां कुछ चीजों की जरूरत है ।

इसके अलावा, जैसा कि उल्लेख किया गया है, आप इस बात का white-space: preध्यान रखते हुए इस्तेमाल कर सकते हैं (एंडरएमबी देखें) कि preवसीयत करते समय सफेद जगह नहीं गिरेगी white-space: nowrap।

Answer 6

यह एक कोशिश दे। इसके preबजाय इसका उपयोग करता है nowrapजैसा कि मैं मानूंगा कि आप इसे इसी तरह चलाना चाहेंगे <pre>लेकिन या तो ठीक काम करेंगे:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space:pre;
}

http://jsfiddle.net/NXchy/11/

Answer 7

मैं यहाँ कूदकर उसी चीज़ की तलाश में था, लेकिन किसी ने मेरे लिए काम नहीं किया।

ऐसे उदाहरण हैं जहां आप क्या करते हैं, और सिस्टम पर निर्भर करता है (Oracle डिजाइनर: Oracle 11g - PL / SQL), divs हमेशा अगली पंक्ति में जाएंगे, जिस स्थिति में आपको इसके बजाय स्पैन टैग का उपयोग करना चाहिए।

यह मेरे लिए अद्भुत काम कर गया।

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

Comments

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

— एड्रेंसरबिन

Answer 8

इसे अपने div में जोड़ें

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

Comments

आप जोड़ सकते हैं: अतिप्रवाह: एक क्षैतिज स्क्रॉलबार प्रदर्शित करने के लिए ऑटो

— सारा वेस्ट

Answer 9

div {
    display: flex;
    flex-direction: row; 
}

मेरे लिए काम करने वाला समाधान था। कुछ मामलों में div-lists के साथ इसकी आवश्यकता है।

कुछ वैकल्पिक दिशा मूल्य हैं row-reverse, column, column-reverse, unset, initial, inherit जो उन चीजों को करते हैं जिनकी आप उनसे अपेक्षा करते हैं

Answer 10

एक ऊंचाई सेट करने का प्रयास करें ताकि ब्लॉक आपके पाठ को समायोजित करने के लिए न बढ़ सके, और overflow: hiddenपैरामीटर रख सके

संपादित करें: यदि आपको 2 पंक्ति ऊँची प्रदर्शित करने की आवश्यकता है, तो यहां एक उदाहरण दिया जा सकता है:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}

Comments

आपके मामले में नॉरैप विकल्प शायद बेहतर है, लेकिन मैंने अपना जवाब छोड़ दिया क्योंकि मुझे कभी-कभी अपने आप को एक ऐसे ब्लॉक की आवश्यकता होती है, जिसमें कुछ पंक्तियाँ हो सकती हैं जब तक कि यह इस तरह से ओवरफ्लो न हो जाए: jsfiddle.net/NXchy/7 (स्टीफनमाउर्डोच के संस्करण से लिंक को बदल दिया गया,) धन्यवाद!)

— राउटर सिमंस

इसके लिए कोई ज़रूरत नहीं है, अगर उपयोगकर्ता ctrl- + का उपयोग करके पाठ आकार को टक्कर देना चाहता है तो क्या होगा? ऊंचाई को लचीला रखना बेहतर है।

— मार्क ऑडिट

अगर उपयोगकर्ता ctrl- + के साथ पाठ का आकार बदल देता है, तो बस काम करना चाहिए: jsfiddle.net/kpKW3

— Wouter Simons

का उपयोग करते हुए em's में heightयह लचीला, प्रमुख मुद्दा अच्छी तरह से अपने उदाहरण में यहाँ सचित्र रहता है।

— मार्क ऑडिट