1 पंक्ति से अधिक का पाठ लेने से कैसे रोकें?

Question

क्या कोई शब्द-आवरण या कोई अन्य विशेषता है जो पाठ को लपेटने से रोकती है? मेरे पास एक ऊंचाई है, और overflow:hidden, और पाठ अभी भी टूट गया है।

CSS3 से पहले, सभी ब्राउज़रों में काम करने की आवश्यकता है।

Answer 1

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

नोट: यह केवल ब्लॉक तत्वों पर काम करता है। यदि आपको टेबल सेल के लिए ऐसा करने की आवश्यकता है (उदाहरण के लिए) तो आपको टेबल सेल के अंदर एक डिव लगाने की जरूरत है क्योंकि टेबल सेल में टेबल-सेल ब्लॉक है।

CSS3 के रूप में, यह तालिका कोशिकाओं के लिए भी समर्थित है।

Comments

सफेद-अंतरिक्ष! यही कारण है कि मैं देख रहा हूँ ... 1,000 धन्यवाद ... यह Google के लिए असंभव है!

शब्द-आवरण (IIRC) नामक एक स्वामित्व अर्थात विशेषता भी है ... बेवकूफ IE।

— -09

इसके अलावा "पाठ-अतिप्रवाह: दीर्घवृत्त" पर विचार करें यह जोड़ता है ... आपके पाठ के अंत में अगर यह आपके कंटेनर की चौड़ाई की सीमा से बाहर चला जाता है

— आकर्षित Landgrave

मुझे लगता है कि "यह केवल ब्लॉक तत्वों पर काम करता है" टिप्पणी सही है। यदि आप एंकर, पैराग्राफ, हेडिंग आदि में यह कोशिश करते हैं, तो यह काम नहीं करता है। आपको कुछ करने की ज़रूरत हैp.oneline { white-space:nowrap; overflow:hidden; display:block;}

— एलेक्स एंजेलिको

अतिप्रवाह को छिपाने से सावधान रहें; इसका मतलब है व्यापार।

— डेविड ए। ग्रे

Answer 2

आप इसे CSS white-space Propertyप्राप्त करने के लिए उपयोग कर सकते हैं ।

white-space: nowrap

Answer 3

दीर्घवृत्त का उपयोग करते हुए ... पिछले पर जोड़ देगा।

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

Answer 4

कभी-कभी  रिक्त स्थान के बजाय उपयोग करना काम करेगा। स्पष्ट रूप से इसमें कमियां हैं, हालांकि।

Comments

दुर्भाग्य से, मैं इसे इस परिस्थिति में नहीं कर सकता

Answer 5

बस क्रिस्टल स्पष्ट होने के लिए, यह पैराग्राफ और हेडर आदि के साथ अच्छी तरह से काम करता है। आपको केवल निर्दिष्ट करने की आवश्यकता है display: block।

उदाहरण के लिए:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(इनलाइन शैलियों को माफ़ करें)