पाठ-अतिप्रवाह: दीर्घवृत्त काम नहीं कर रहा है

Question

यही मैंने कोशिश की ( यहाँ देखें ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

अनिवार्य रूप से, मैं चाहता हूं कि स्प्लिट दीर्घवृत्त के साथ सिकुड़ जाए जब खिड़की छोटी हो जाती है। मैंने गलत क्या किया?

Comments

काम करने के लिए दीर्घवृत्त की आवश्यकताएं: stackoverflow.com/a/33061059/3597276

— माइकल बेंजामिन

जब मुझे लगा कि यह काम नहीं कर रहा है, तो समस्या यह है कि मैंने काफी लंबे समय तक (10px) चौड़ाई निर्धारित नहीं की थी। तो मैं दीर्घवृत्त काट रहा था, दोह!

— रॉड

Answer 1

आपको सीएसएस overflow, width(या max-width) display, और होना चाहिए white-space।

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

---

परिशिष्ट यदि आप लाइन क्लैंपिंग (मल्टीलाइन ओवरफ्लो एलिप्स) करने के लिए तकनीकों का अवलोकन चाहते हैं, तो इस CSS- ट्रिक्स पेज को देखें: https://css-tricks.com/line-clampin/

Addendum2 (मई 2019)
जैसा कि इस लिंक का दावा है, फ़ायरफ़ॉक्स 68 समर्थन करेगा -webkit-line-clamp(!)

Comments

सफेद-अंतरिक्ष संपत्ति वह थी जो मैं गायब था। धन्यवाद।

— नेबुलसगर्ल

यह बेकार है कि आपको white-space: nowrap;संपत्ति की आवश्यकता है । अब आप केवल एक ब्लॉक टेक्स्ट के बजाय ... के साथ पाठ की एक पंक्ति बना सकते हैं।

— स्वेन वैन ज़ोलेन

आज, सभी प्रमुख ब्राउज़र ellipsis का समर्थन करते हैं: caniuse.com/#feat=text-overflow

— kazy

@basZero Multiline Ellipsis केवल CSS के साथ समर्थित नहीं है। आपको अन्य उपाय करने हैं

— yunzen

आपको एक चौड़ाई निर्दिष्ट करने की आवश्यकता है ताकि कंटेनर बाध्य हो, आपको अतिप्रवाह सेट करने की आवश्यकता है: छिपा हुआ है इसलिए ब्राउज़र रन-ओवर पाठ को छिपाएगा, और फिर पाठ-अतिप्रवाह सेट करें: ब्राउज़र को विशेष रूप से पाठ ओवरफ़्लो को छिपाने के तरीके को निर्देशित करने के लिए दीर्घवृत्त सेट करें।

— माइकल एंजेस्टैड

Answer 2

सुनिश्चित करें कि आपके पास एक ब्लॉक तत्व है, एक अधिकतम आकार और छिपे हुए ओवरफ्लो पर सेट करें। (IE9 और FF 7 में परीक्षण किया गया)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Comments

उस श्वेत-अंतरिक्ष की तरह लगता है: रिक्त स्थान के साथ किसी भी चीज के लिए नॉरैप प्रॉपर्टी आमतौर पर आवश्यक हो सकती है।

— कजकाई

उपरोक्त टिप्पणी का सटीक डुप्लिकेट।

— नेबुलसगर्ल

@nebulousGirl: वास्तव में Kzqai की टिप्पणी HerrSerker की टिप्पणियों में पोस्ट किए गए लोगों की तुलना में पहले थी।

— लेप

IE में क्विक है - IE एक दूसरे शब्द (IE 11 में परीक्षण) को लपेटता नहीं है ... जाओ आंकड़ा। उम्मीद के मुताबिक (अच्छे पुराने ओपेरा 12 सहित) किसी अन्य ब्राउज़र में काम करता है।

— नक्स

@ नक्स यह भी एमएस एज ब्राउज़र में अपेक्षित रूप से काम नहीं कर रहा है

— yunzen

Answer 3

Chrome उपयोग में बहु-लाइनों के लिए:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

YouTube से प्रेरित ;-)

Comments

यह एक बहुत ही दिलचस्प समाधान है। यह -webkit-*गुणों का उपयोग करता है, लेकिन सभी प्रमुख ब्राउज़रों में समर्थित है। : अधिक जानकारी यहां पाया जा सकता css-tricks.com/almanac/properties/l/line-clamp

— dkniffin

Answer 4

मैं क्रोम के तहत दीर्घवृत्त के साथ एक मुद्दा रहा था। व्हाइट-स्पेस को चालू करना: नॉरैप इसे ठीक करने के लिए लग रहा था।

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

Answer 5

word-wrap: break-word;

यह और केवल इसने मेरे लिए काम किया

<pre> </pre> 

टैग

एलीगिसिस करने के लिए कुछ और विफल रहा ...।

Answer 6

बस किसी के लिए एक हेडअप जो इस भर में ठोकर खा सकता है ... मेरा h2 विरासत में मिला था

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

जो दीर्घवृत्त की अनुमति नहीं दे रहा था। जाहिरा तौर पर यह बहुत ही मुश्किल है एह?

Answer 7

जहाँ आप पसंद करते हैं, उसके लिए यह नीचे कोड जोड़ें

उदाहरण

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Answer 8

कई लाइनों के लिए

क्रोम में, आप इस सीएसएस को लागू कर सकते हैं यदि आपको कई लाइनों पर एलिप्सिस लगाने की आवश्यकता है।

आप निश्चित चौड़ाई के तत्व को निर्दिष्ट करने के लिए अपने सीएसएस में चौड़ाई भी जोड़ सकते हैं :

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Answer 9

आप CSS में निम्नलिखित जोड़कर ellipsis का उपयोग करने का प्रयास कर सकते हैं:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

लेकिन ऐसा लगता है कि यह कोड केवल एक-पंक्ति ट्रिम पर लागू होता है। पाठ को ट्रिम करने और दीर्घवृत्त दिखाने के अधिक तरीके इस वेबसाइट पर देखे जा सकते हैं: http://blog.sanuker.com/?p=631

Answer 10

CSS में ellipsis को काम करने के लिए निम्नलिखित पंक्तियों को जोड़ें

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Answer 11

हम में से जो तय चौड़ाई का उपयोग नहीं करना चाहते हैं, उनके लिए भी यह काम करता है display: inline-grid। इसलिए आवश्यक गुणों के साथ आप बस जोड़ते हैंdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}