सीएसएस अतिप्रवाह - पाठ की केवल 1 पंक्ति

134

मेरे पास divनिम्नलिखित सीएसएस शैली है:

width:335px; float:left; overflow:hidden; padding-left:5px;

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

मैं ऊंचाई तय करने के बारे में सोच रहा था लेकिन यह गलत लग रहा है।

हो सकता है कि अगर मैं ऊंचाई जोड़ूं जो फ़ॉन्ट के समान है, तो यह काम करना चाहिए और विभिन्न ब्राउज़रों में किसी भी समस्या का कारण नहीं होना चाहिए?

मैं उसे कैसे कर सकता हूँ?

html css overflow

— होम रन
स्रोत

क्या आप jsFiddle पर अपनी समस्या प्रदर्शित कर सकते हैं ?

— हैरी जॉय

352

यदि आप इसे एक पंक्ति में सीमित करना चाहते हैं, white-space: nowrap;तो div पर उपयोग करें ।

— Septnuits
स्रोत

लेकिन अगर पाठ निर्दिष्ट आयाम से परे जाता है तो यह दीर्घवृत्त नहीं दिखाता है। stackoverflow.com/questions/26342411/…

— SearchForKnowledge

यह काम करता है, महान। लेकिन मुझे जरूरत है ...अगर दिखाने के लिए अधिक चरित्र हैं क्योंकि जब लाइन की लंबाई लंबी होती है और यह लिखित div से बाहर जाती है।

— मोशी

यह अजीब कार्य करता है यदि छिपे हुए पाठ में हाइपर लिंक होते हैं। यदि मैं पृष्ठ के माध्यम से टैब करना चाहता था तो यह छिपे हुए पाठ में लिंक को स्क्रीन पर स्क्रॉल करने का कारण बनता है, जब इसे छिपाया जाना चाहिए।

— एरिक

76

यदि आप इंगित करना चाहते हैं कि उस div में अभी और भी सामग्री उपलब्ध है, तो आप शायद "दीर्घवृत्त" दिखाना चाहते हैं:

text-overflow: ellipsis;

यह white-space: nowrap;सेप्टन्यूट्स द्वारा सुझाए गए के अतिरिक्त होना चाहिए ।

इसके अलावा, सुनिश्चित करें कि आप फ़ायरफ़ॉक्स में इसे संभालने के लिए इस थ्रेड को चेकआउट करते हैं ।

— मौली
स्रोत

47

मेरा मानना है कि आप का उपयोग करना चाहिए text-overflow: ellipsis;के साथ overflow: hidden;और white-space: nowrap;यह काम करने के लिए

— फ्रांसिस्को कोस्टा

caniuse.com/#feat=text-overflow उर्फ। हाँ तुम कर सकते हो। शीर्षक सामग्री में संपूर्ण सामग्री डालने पर विचार करें, इसलिए उपयोगकर्ता के पास अभी भी पहुंच है।

— डैनमैन

मेरा सिर्फ एक लाइन में दिखाता है और ellipsis दिखाने से पहले DIV को पॉप्युलेट नहीं करता है ... stackoverflow.com/questions/26342411/… ( jsfiddle.net/ofrj55j4/20 )

— SearchForKrenge

43

आप इस css कोड का उपयोग कर सकते हैं:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

पाठ-अतिप्रवाह सीएसएस में संपत्ति स्थितियों में, जहां पाठ काटा गया है जब यह तत्व का पिटारा overflows से संबंधित है। इसे क्लिप किया जा सकता है (अर्थात कटे हुए, छिपे हुए), एक दीर्घवृत्त ('...', यूनिकोड रेंज मान U + 2026) प्रदर्शित करें।

ध्यान दें कि टेक्स्ट-ओवरफ़्लो केवल तब होता है जब कंटेनर की ओवरफ़्लो संपत्ति में छिपा हुआ , स्क्रॉल या ऑटो और व्हाइट-स्पेस होता है: नॉरैप; ।

टेक्स्ट ओवरफ्लो केवल ब्लॉक या इनलाइन-ब्लॉक स्तर के तत्वों पर ही हो सकता है , क्योंकि ओवरफ्लो-एड होने के लिए तत्व की चौड़ाई होनी चाहिए। ओवरफ्लो दिशा में होता है जैसा कि दिशा संपत्ति या संबंधित विशेषताओं द्वारा निर्धारित किया जाता है।

— गौरव त्रिपाठी
स्रोत

6

UX और UI के लिए सबसे अच्छा कोड है

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

— ओमिद अहमदानी
स्रोत

0

अगर इसके अलावा कृपया, यदि आपके पास एक लंबा पाठ है तो कृपया आप इस सीएसएस कोड का उपयोग कर सकते हैं;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

संपूर्ण पंक्ति पाठ को दृश्यमान बनाएं।

— shafii मुहुदी
स्रोत

0

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

एक लाइन में ओवरफ्लो सेट करने के लिए चौड़ाई भी परिभाषित करें

— जयदीप कटारिया
स्रोत

-2

मेरे पास एक ही मुद्दा था और मैंने इसका उपयोग करके हल किया:

display: inline-block;

पर divमें सवाल।

— Dekcolnu
स्रोत