दिलचस्प पोस्ट
ES6 में ब्लॉक-स्तरीय फ़ंक्शन के सटीक शब्दार्थ क्या हैं? D3js – क्षैतिज पट्टी चार्ट में कार्यक्षेत्र बार चार्ट बदलें क्या मुझे हमेशा 'अपवाद' स्टेटमेंट में कोई अपवाद प्रकार निर्दिष्ट करना चाहिए? क्या बाश कमांड के लिए संभव है पिछले कमान के परिणाम से पहले? क्यों दस्तावेज़ है। गेट एलेमेंट बीआईआईडी वापस लौट रहा है फ़ाइल नाम से निर्देशिका नाम प्राप्त करना सबवर्सन में क्या मैं अपने लॉगिन नाम के अलावा एक उपयोगकर्ता हो सकता हूं? Mongoose / MongoDB में पासवर्ड फ़ील्ड को कैसे सुरक्षित रखा जाए, इसलिए जब मैं संकलन को भरता हूं तो यह क्वेरी में वापस नहीं आएगा? DownloadManager का उपयोग करते हुए गतिविधि के अंदर प्रगति डाउनलोड करें दिखाएं ओरेकल में जुड़ें क्वेरी के साथ अपडेट करें एंड्रॉइड टुकड़े और एनीमेशन UIButton: छवि इमेज और शीर्षक Egegeets का उपयोग कर एक छवि और पाठ को कैसे केन्द्रित करना है? प्रोग्राम प्रदर्शन को मापने के लिए लिनक्स में एक उच्च संकल्प टाइमर कैसे तैयार करें? खोजने में विकल्प का कोई अभाव है, अब क्या होगा? ReactJS में घटकों को दिखाएँ / छुपाएं

दूसरी पंक्ति पर सीएसएस एलिप्सिस

सीएसएस text-overflow: ellipsis दूसरी पंक्ति पर text-overflow: ellipsis , क्या यह संभव है? मुझे इसे नेट पर नहीं मिल सकता है

उदाहरण:

मैं क्या चाहता हूँ इस तरह है:

 I hope someone could help me. I need an ellipsis on the second line of... 

लेकिन यह क्या हो रहा है:

 I hope someone could help me. I ... 

Solutions Collecting From Web of "दूसरी पंक्ति पर सीएसएस एलिप्सिस"

text-overflow: ellipsis; लिए एक आवश्यकता text-overflow: ellipsis; काम करने के लिए white-space का एक-लाइन संस्करण ( pre , nowrap आदि) है। इसका अर्थ है कि पाठ दूसरी पंक्ति तक कभी नहीं पहुंचेगा।

Ergo। शुद्ध सीएसएस में संभव नहीं है

मेरा स्रोत जब मैं अभी ठीक उसी चीज़ की तलाश कर रहा था: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

संपादित करें यदि अच्छा सीएसएस देवता http://www.w3.org/TR/css-overflow-3/#max-lines को लागू करेंगे तो हम इसे विशुद्ध सीएसएस में fragments (नई) और max-lines (नया) का उपयोग कर सकते हैं। http://css-tricks.com/line-clampin/ पर कुछ और जानकारी भी

2 वेबकिट संपादित करें / ब्लिंक में line-clamp : -webkit-line-clamp: 2 अंडाकार को दूसरी पंक्ति पर रखा जाएगा।

यह वेबकिट ब्राउज़र में काम करना चाहिए:

 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 

जैसा कि अन्य लोगों ने पहले से ही उत्तर दिया है, एक शुद्ध सीएसएस समाधान मौजूद नहीं है। एक jQuery प्लगइन है जो उपयोग करने के लिए बहुत आसान है, इसे डॉटडोटोटॉट कहा जाता है। यह कंटेनर की चौड़ाई और ऊँचाई का उपयोग करता है, यदि यह घटाना और अंडाकार जोड़ना आवश्यक है।

 $("#multilinedElement").dotdotdot(); 

ये एक जेएसएफडल है

मुझे पता चला कि स्कीप का जवाब पर्याप्त नहीं था और overflow शैली की भी जरूरत थी:

 overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; 

यह शर्म की बात है कि आप इसे दो पंक्तियों पर काम करने के लिए नहीं ले सकते! भयानक होगा यदि तत्व डिस्प्ले ब्लॉक होता था और इसकी ऊंचाई 2 एएम या कुछ और सेट थी, और जब यह ओवरफ्लो हुआ होता तो यह एक एलीपिसिस दिखाएगा!

एक एकल लाइनर के लिए आप इसका उपयोग कर सकते हैं:

 .show-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

कई लाइनों के लिए शायद आप पॉलिफ़िल का उपयोग कर सकते हैं जैसे कि jQuery ऑटोऑलिप्सिस जो कि गिटब पर है http://pvdspek.github.com/jquery.autoellipsis/

मैं एक जेएस समर्थक नहीं हूं, लेकिन मैंने कुछ तरीके ढूँढ़ लिए हैं जिनसे आप ऐसा कर सकते थे।

एचटीएमएल:

 <p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p> 

फिर jQuery के साथ आप उसे एक विशिष्ट चरित्र गिनती में छोटा कर देते हैं लेकिन इस तरह अंतिम शब्द छोड़ दें:

 // Truncate but leave last word var myTag = $('#truncate').text(); if (myTag.length > 100) { var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…"; $('#truncate').text(truncated); } 

परिणाम इस तरह दिखता है:

इस वेबसाइट पर विज्ञापन दें, कृपया हमसे संपर्क करें मोरबी
इसके बाद के परिणाम और …

या, आप इसे किसी विशिष्ट चरित्र की गिनती में आसानी से छोटा कर सकते हैं:

 // Truncate to specific character var myTag = $('#truncate').text(); if (myTag.length > 15) { var truncated = myTag.trim().substring(0, 100) + "…"; $('#truncate').text(truncated); } 

परिणाम इस तरह दिखता है:

इस वेबसाइट पर विज्ञापन दें, कृपया हमसे संपर्क करें मोरबी
इसके बाद के परिणाम और अनुभव …

उम्मीद है कि इससे थोड़ी मदद मिलेगीं।

ये जेएसफ़ाल्ड है

मैंने पहले jQuery- कंसेंस-प्लगइन का उपयोग किया है, जो ऐसा लगता है कि आप जो चाहें कर सकते हैं। यदि नहीं, तो अलग – अलग प्लग-इन जो आपकी आवश्यकताओं के अनुरूप हो सकते हैं

संपादित करें: आपने एक डेमो बनाया – ध्यान दें कि मैंने जेक्यूआर कंसेंस । जेएस को उस डेमो पर जोड़ा जो जादू करता है, इसलिए उस प्लगइन के लेखक को पूरा श्रेय 🙂

अगर कोई एसएएसएस / एससीएसएस का उपयोग कर रहा है और इस प्रश्न पर ठोकर लगाता है – शायद यह मिक्सिन मदद का हो सकता है:

 @mixin line-clamp($numLines : 1, $lineHeight: 1.412) { overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: block; /* autoprefixer: off */ display: -webkit-box; -webkit-line-clamp: $numLines; -webkit-box-orient: vertical; max-height: $numLines * $lineHeight + unquote('em'); } 

यह केवल वेबकिट ब्राउज़र में एलीपसिस को जोड़ता है आराम बस इसे बंद कटौती

यह एक गैर-मानक सीएसएस है, जो सीएसएस के वर्तमान संस्करण में शामिल नहीं है (फ़ायरफ़ॉक्स इसे समर्थन नहीं करता)। बजाय जावास्क्रिप्ट का उपयोग करने का प्रयास करें।

मैंने पहले इस मुद्दे को पूरा किया है, और कोई शुद्ध सीएसएस समाधान नहीं है

यही कारण है कि मैंने इस मुद्दे (दूसरों के बीच) से निपटने के लिए एक छोटी लाइब्रेरी विकसित की है। लाइब्रेरी ऑब्जेक्ट्स को मॉडेल और पत्र-स्तरीय टेक्स्ट रेंडरिंग करने देती है। उदाहरण के लिए आप एक पाठ-ओवरफ्लो का अनुकरण कर सकते हैं: एपैप्सीस के साथ एक मनमाने सीमा (आवश्यक एक पंक्ति नहीं)

http://www.samuelrossille.com/home/jstext.html पर स्क्रीनशॉट, ट्यूटोरियल, और डॉवलोड लिंक के लिए और पढ़ें।

यहां शुद्ध सीएसएस में अच्छा उदाहरण है

 .container{ width: 200px; } .block-with-text { overflow: hidden; position: relative; line-height: 1.2em; max-height: 3.6em; text-align: justify; margin-right: -1em; padding-right: 1em; } .block-with-text+.block-with-text{ margin-top:10px; } .block-with-text:before { content: '...'; position: absolute; right: 0; bottom: 0; } .block-with-text:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; } 
 <div class="container"> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a </div> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="block-with-text"> Lorem Ipsum is simply </div> </div> 

अगर कोई फ्लेक्सबॉक्स में काम करने के लिए लाइन-क्लैंप प्राप्त करने की कोशिश कर रहा है , तो यह थोड़ा पेचीदा है – विशेष रूप से एक बार जब आप वास्तव में लंबे शब्द के साथ यातना परीक्षण कर रहे होते हैं इस कोड स्निपेट में केवल वास्तविक अंतर min-width: 0; फ्लेक्स वस्तु में छांटे हुए पाठ, और word-wrap: break-word; । अंतर्दृष्टि के लिए https://css-tricks.com/flexbox-truncated-text/ पर टोपी-टिप अस्वीकरण: यह अभी तक केवल वेबकिट है जहां तक ​​मुझे पता है।

 .flex-parent { display: flex; } .short-and-fixed { width: 30px; height: 30px; background: lightgreen; } .long-and-truncated { margin: 0 20px; flex: 1; min-width: 0;/* Important for long words! */ } .long-and-truncated span { display: inline; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word;/* Important for long words! */ } 
 <div class="flex-parent"> <div class="flex-child short-and-fixed"> </div> <div class="flex-child long-and-truncated"> <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span> </div> <div class="flex-child short-and-fixed"> </div> </div> 

वेबकीट पर काम करने वाली वेबकैट-लाइन क्लैंप पर एक शुद्ध सीएसएस विधि आधार:

 @-webkit-keyframes ellipsis {/*for test*/ 0% { width: 622px } 50% { width: 311px } 100% { width: 622px } } .ellipsis { max-height: 40px;/* h*n */ overflow: hidden; background: #eee; -webkit-animation: ellipsis ease 5s infinite;/*for test*/ /** overflow: visible; /**/ } .ellipsis .content { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; font-size: 50px;/* w */ line-height: 20px;/* line-height h */ color: transparent; -webkit-line-clamp: 2;/* max row number n */ vertical-align: top; } .ellipsis .text { display: inline; vertical-align: top; font-size: 14px; color: #000; } .ellipsis .overlay { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; overflow: hidden; /** overflow: visible; left: 0; background: rgba(0,0,0,.5); /**/ } .ellipsis .overlay:before { content: ""; display: block; float: left; width: 50%; height: 100%; /** background: lightgreen; /**/ } .ellipsis .placeholder { float: left; width: 50%; height: 40px;/* h*n */ /** background: lightblue; /**/ } .ellipsis .more { position: relative; top: -20px;/* -h */ left: -50px;/* -w */ float: left; color: #000; width: 50px;/* width of the .more w */ height: 20px;/* h */ font-size: 14px; /** top: 0; left: 0; background: orange; /**/ } 
 <div class='ellipsis'> <div class='content'> <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div> <div class='overlay'> <div class='placeholder'></div> <div class='more'>...more</div> </div> </div> </div> 

मुझे एक हल मिल गया है, लेकिन आपको किसी कठोर अक्षरों की लंबाई जानना आवश्यक है जो आपके पाठ क्षेत्र में फिट होगा, फिर पूर्ववर्ती अंतरिक्ष में शामिल हों …

जिस तरह से मैंने यह किया है:

  1. एक मोटे चरित्र की लंबाई (इस मामले में 200) मानिए और अपने पाठ के साथ फ़ंक्शन पर पास करें
  2. रिक्त स्थान को विभाजित करें ताकि आपके पास एक लंबी स्ट्रिंग हो
  3. अपने चरित्र की लंबाई के बाद पहली "" स्थान को टुकड़ा पाने के लिए jQuery का उपयोग करें
  4. शेष में शामिल हों …

कोड:

 truncate = function(description){ return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "..."; } 

यहां एक बेला है – http://jsfiddle.net/GYsW6/1/