सीएसएस के साथ, बहु-लाइनों के अतिप्रवाहित ब्लॉक के लिए "..." का उपयोग करें

Question

साथ में

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

"..." लाइन के अंत में दिखाया जाएगा अगर अतिप्रवाह। हालाँकि, यह केवल एक पंक्ति में दिखाया जाएगा। लेकिन मैं चाहूंगा कि इसे मल्टी-लाइनों में दिखाया जाए।

ऐसा लग सकता है:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Comments

यदि ये प्रत्येक अलग रेखाएँ हैं, तो आपको वास्तव में केवल एक पंक्ति करने और प्रत्येक पंक्ति के लिए कार्यक्षमता दोहराने की चिंता करने की आवश्यकता है। यदि ये रेखाएँ सभी एक ही वाक्य से संबंधित हैं, तो संभवतः आपको केवल अंतिम पंक्ति पर ही दीर्घवृत्त रखना चाहिए। यदि आप एक वाक्य के माध्यम से दीर्घवृत्त का उपयोग करते हैं, तो आप अनिवार्य रूप से अपने वाक्य में एक छेद बना रहे हैं।

— 4

संबंधित stackoverflow.com/questions/802175/…

— Adrien Be

इस विषय पर एक अच्छा लेख css-tricks.com/line-clampin

— Adrien Be

कृपया मेरे उत्तर के लिए निम्नलिखित लिंक देखें: stackoverflow.com/questions/536814/…

— शिशिर अरोरा

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

— दशहरा

Answer 1

कई jquery प्लगइन्स भी हैं जो इस समस्या से निपटते हैं, लेकिन कई पाठ की कई पंक्तियों को संभाल नहीं पाते हैं। निम्नलिखित कार्य:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

वहाँ भी कुछ पूर्वसर्ग परीक्षण ।

Comments

मैंने इस आवश्यकता के लिए कोई शुद्ध सीएसएस समाधान नहीं देखा है

— जिम थॉमस

@ ओवलिया ध्यान दें कि जिम के समाधान में jQuery नाम का एक jQuery प्लगइन भी शामिल है। autoellipsis.js, आपको अलग से एक शामिल करना होगा

— जेफ

css मल्टीलाइन एलीपिस

— Julien

प्रिय लोगों को भविष्य से: यह प्लगइन मेरा पसंदीदा है, क्योंकि यह छिपे हुए पाठ के टॉगल प्रदर्शन की अनुमति देता है। http://keith-wood.name/more.html

— brichins

मेरे द्वारा जोड़े गए सभी पुस्तकालय अच्छे हैं। प्रदर्शन परीक्षण आपको तय करने में मदद कर सकते हैं, लेकिन मैं यह उल्लेख करना चाहूंगा कि हम आमतौर पर dotdotdot को लागू कर रहे हैं क्योंकि यह विन्यास और स्वच्छ कोड की एक विस्तृत श्रृंखला है - संशोधित करने में आसान है। (ध्यान दें, यह केवल व्यक्तिगत दृष्टिकोण है - जो उत्तर देने के लिए नहीं है।)

— मिलान जारोस

Answer 2

जब तक मैं इस के करीब कुछ हासिल करने में कामयाब नहीं हो जाता, तब तक मैंने चारों ओर हैक कर लिया। यह कुछ गुच्छों के साथ आता है:

1. यह शुद्ध सीएसएस नहीं है; आपको कुछ HTML तत्वों को जोड़ना होगा। हालांकि कोई जावास्क्रिप्ट की आवश्यकता है।
2. अंतिम पंक्ति पर दीर्घवृत्त सही-संरेखित है। इसका मतलब यह है कि यदि आपका पाठ सही-संरेखित या उचित नहीं है, तो अंतिम दृश्य शब्द और दीर्घवृत्त (पहले छिपे हुए शब्द की लंबाई के आधार पर) के बीच एक ध्यान देने योग्य अंतर हो सकता है।
3. दीर्घवृत्त के लिए स्थान हमेशा आरक्षित होता है। इसका मतलब है कि यदि पाठ बॉक्स में लगभग ठीक बैठता है, तो यह अनावश्यक रूप से छंटनी हो सकती है (अंतिम शब्द छिपा हुआ है, हालांकि यह तकनीकी रूप से नहीं होगा)।
4. आपके पाठ को एक निश्चित पृष्ठभूमि रंग की आवश्यकता है, क्योंकि हम उन मामलों में दीर्घवृत्त को छिपाने के लिए रंगीन आयतों का उपयोग कर रहे हैं जहां इसकी आवश्यकता नहीं है।

मुझे यह भी ध्यान देना चाहिए कि पाठ एक शब्द सीमा पर टूट जाएगा, चरित्र सीमा नहीं। यह जानबूझकर किया गया था (क्योंकि मैं लंबे ग्रंथों के लिए बेहतर मानता हूं), लेकिन क्योंकि यह जो text-overflow: ellipsisकरता है उससे अलग है, मैंने सोचा कि मुझे इसका उल्लेख करना चाहिए।

यदि आप इन कैविटीज़ के साथ रह सकते हैं, तो HTML इस तरह दिखता है:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

और यह सफ़ेद पृष्ठभूमि पर पाठ की तीन पंक्तियों के साथ 150 पिक्सेल चौड़े बॉक्स के उदाहरण का उपयोग करके संबंधित सीएसएस है। यह मानता है कि आपके पास एक सीएसएस रीसेट या समान है जो आवश्यक होने पर मार्जिन और पेडिंग सेट करता है।

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

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

यह स्पष्ट करने के लिए कि यह कैसे काम करता है, यहां एक ही छवि है, सिवाय इसके कि .hidedots1लाल और .hidedots2सियान में हाइलाइट किया गया है। जब कोई अदृश्य पाठ न हो तो ये आयतें छिपाते हैं:

IE9, IE8 (उत्सर्जित), क्रोम, फ़ायरफ़ॉक्स, सफारी और ओपेरा में परीक्षण किया गया। IE7 में काम नहीं करता है।

Comments

आप वास्तव में प्रदान की 4 HTML तत्वों की जरूरत नहीं है your textके साथ लिपटे है <p>टैग (के रूप में वे किया जाना चाहिए), तो आप उपयोग कर सकते हैं .ellipsify p:beforeऔर .ellipsify p:afterउसके बाद निश्चित रूप से आप की जरूरत अंडाकार के लिए कोड है, भी, आवश्यकता हो सकती है के रूप में वे काम नहीं हो सकता खाली तत्वों के लिए। .ellipsify p:before{content:"\2026";}\2026content:" ";

— वैल

हालांकि मुझे नहीं लगता कि यह उत्तर कई स्थितियों के अनुकूल होगा, कम से कम एक गैर-प्लगइन, गैर-जावास्क्रिप्ट उत्तर प्रदान किया जाता है। वह और सरलता जो इस उत्तर के निर्माण में चली गई, इसीलिए मैं +1यह हूं ।

— वोडकेकिंग

@MichalStefanow सिर्फ एक - एक मैंने इसके लिए बनाया: Apptivate.MS पर ऐप "कार्ड" पर विवरण, उदाहरण के लिए apptivate.ms/users/1141291/blynn देखें ।

— बाल्फा

@Pavlo, मैं वास्तव में अपने समाधान की तरह। लेकिन यह केवल दिए गए मानक पाठ के साथ काम करने लगता है, न कि अगर मैं एक db से पाठ को लोड करता हूं, तो स्क्रिप्ट का कारण बनता है, तो लोड किए गए पाठ के बाहरी दृश्य को नहीं जानता है?

— जोन्सन

@SchweizerSchoggi, छद्म तत्व या नहीं, यह समाधान JS पर निर्भर नहीं करता है। इससे कोई फर्क नहीं पड़ता कि अगर आप इसे सही तरीके से लागू करते हैं तो आपको टेक्स्ट कहां से मिलेगा।

— पावलो

Answer 3

यहाँ एक हालिया सीएसएस-ट्रिक्स लेख है जो इस पर चर्चा करता है।

उपरोक्त लेख में कुछ समाधान (जिनका उल्लेख यहां नहीं किया गया है) हैं

1) -webkit-line-clampऔर 2) फीका आउट के साथ नीचे की ओर एक बिल्कुल तैनात तत्व रखें

दोनों विधियाँ निम्नलिखित मार्कअप मानती हैं:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

सीएसएस के साथ

.module {
  width: 250px;
  overflow: hidden;
}

1) -वेबकिट-लाइन-क्लैंप

लाइन-क्लैंप FIDDLE (.. अधिकतम 3 पंक्तियों के लिए)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) बाहर फीका

मान लें कि आप लाइन-ऊंचाई को 1.2em पर सेट करते हैं। यदि हम पाठ की तीन पंक्तियों को उजागर करना चाहते हैं, तो हम केवल कंटेनर की ऊंचाई 3.6em (1.2em × 3) बना सकते हैं। छिपा हुआ अतिप्रवाह बाकी को छिपा देगा।

FIDDLE को मिटाएँ

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

समाधान # 3 - @supports का उपयोग करके एक संयोजन

हम वेबकिट ब्राउज़र पर वेबकिट के लाइन-क्लैंप को लागू करने और अन्य ब्राउज़रों में फीका लागू करने के लिए @supports का उपयोग कर सकते हैं।

@supports फीका कमबैक फिडेल के साथ लाइन-क्लैंप

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

सीएसएस

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Comments

@ HP के 411 फ़ायरफ़ॉक्स में, आपको एक दीर्घवृत्त के बजाय एक फीका प्रभाव दिखाई देगा

— Danield

Answer 4

नीचे दिया गया लिंक इस समस्या का शुद्ध HTML / CSS समाधान प्रदान करता है।

ब्राउज़र समर्थन - जैसा कि लेख में कहा गया है:

अब तक हमने सफारी 5.0, IE 9 (मानक मोड में होना चाहिए), ओपेरा 12 और फ़ायरफ़ॉक्स 15 पर परीक्षण किया है।

पुराने ब्राउज़र अभी भी काफी अच्छी तरह से काम करेंगे, क्योंकि लेआउट का मांस सामान्य स्थिति, मार्जिन और पैडिंग गुणों में है। यदि आपका प्लेटफ़ॉर्म पुराना है (जैसे फ़ायरफ़ॉक्स 3.6, IE 8), तो आप विधि का उपयोग कर सकते हैं लेकिन ग्रेडिएंट को स्टैंडअलोन PNG इमेज या डायरेक्टएक्स फ़िल्टर के रूप में फिर से करें।

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

सीएसएस:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

HTML:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

बेला

(परीक्षण के लिए ब्राउज़र की विंडो का आकार बदलें)

Comments

"अब तक हमने परीक्षण किया है ..." सब कुछ लेकिन क्रोम?

— स्टीवंसपिल

टेस्ट पास हुआChrome for Mac Version 48.0.2564.116

— एड्रिएन बी

Answer 5

पाठ-अतिप्रवाह के लिए W3 युक्ति को देखने के बाद , मुझे नहीं लगता कि यह केवल CSS का उपयोग करके संभव है। एलिप्सिस एक नई-ईश संपत्ति है, इसलिए संभवतः इसे अभी तक अधिक उपयोग या प्रतिक्रिया नहीं मिली है।

हालाँकि, यह लड़का एक समान (या समरूप) सवाल पूछता है, और कोई व्यक्ति एक अच्छा jQuery समाधान के साथ आने में सक्षम था। आप यहाँ समाधान का डेमो कर सकते हैं: http://jsfiddle.net/MPkSF/

यदि जावास्क्रिप्ट एक विकल्प नहीं है, तो मुझे लगता है कि आप भाग्य से बाहर हो सकते हैं ...

Comments

न्यू-ish? IE6 से MSIE ने इसका समर्थन किया। आज, फ़ायरफ़ॉक्स को छोड़कर सभी ब्राउज़र इसका समर्थन करते हैं ।

— क्रिश्चियन

मैं ऐसी किसी भी CSS3 संपत्ति को कॉल करूंगा जो विश्व स्तर पर "न्यू-ईश" लागू नहीं है। यह सिर्फ शब्दार्थ की बात है। इसके अलावा, क्या आपको लगता है कि आप लगभग एक साल पुरानी पोस्ट पर टिप्पणी कर रहे हैं?

— जेफ

यह CSS3 नहीं है, यह उम्र के लिए रहा है और व्यापक रूप से अपनाया गया है। केवल विनिर्देशन को नया माना जा सकता है। इसके अलावा, अगर SO पुराने थ्रेड पर टिप्पणी नहीं करना चाहते थे, तो वे इसे निष्क्रिय कर सकते थे।

— क्रिश्चियन

Answer 6

केवल पूर्णता के लिए इस प्रश्न को जोड़ना चाहते हैं।

• ओपेरा को इस -o-ellipsis-lastline के लिए गैर-मानक समर्थन है ।
• dotdotdot एक बेहतरीन jQuery प्लगइन है जिसकी मैं सिफारिश कर सकता हूँ।

Comments

ऐसा -o-ellipsis-lastlineप्रतीत होता है कि ओपेरा को वेबकीट में बदलने पर हटाया जा सकता है। ऐतिहासिक उद्देश्यों के लिए गोली छोड़ना।

— मैट

Answer 7

बढ़िया सवाल ... काश, कोई उत्तर होता, लेकिन इन दिनों आप सीएसएस के साथ निकटतम हो सकते हैं। कोई दीर्घवृत्त नहीं, लेकिन अभी भी बहुत उपयोगी है।

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Comments

वास्तव में, केविन का जवाब निकटतम है जो आप इन दिनों CSS के साथ प्राप्त कर सकते हैं stackoverflow.com/a/14248844/759452

— एड्रियन बी

Answer 8

मुझे यह css (scss) समाधान मिला है जो काफी अच्छा काम करता है। वेबकिट ब्राउज़रों पर यह दीर्घवृत्त दिखाता है और अन्य ब्राउज़रों पर यह केवल पाठ को काट देता है। जो मेरे इच्छित उपयोग के लिए ठीक है।

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

निर्माता द्वारा एक उदाहरण: http://codepen.io/martinwolf/pen/qlFdp

Comments

-webkit-line-clampब्राउज़र समर्थन caniuse.com/#search=-webkit-line-clamp

— एड्रियन बन

Answer 9

यहाँ सबसे नज़दीकी समाधान है जिसे मैं सिर्फ css का उपयोग करके प्राप्त कर सकता हूँ।

एचटीएमएल

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

सीएसएस

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

वर्किंग फिडल ( विंडो की जांच करने के लिए आकार बदलें )

स्पष्टीकरण के लिए मेरे ब्लॉग से लिंक करें

अपडेटेड फ़िडल

मुझे उम्मीद है कि अब कुछ सीएसएस विशेषज्ञ इसे सही बनाने के बारे में विचार करेंगे। :)

Comments

वह जवाब मुझे पेट-दर्द दे रहा है। सबसे पहले, आप टाइपोग्राफी उपलब्ध एलिप्सिस का उपयोग नहीं करते हैं ... (यह एक स्थान लेने वाला एक फ़ॉन्ट प्रतीक है)। Smashingmagazine.com/2008/08/11/top-ten-ten-web-typography-sins की तुलना करें और अपने समाधान से, आप वास्तव में नियंत्रण नहीं कर सकते हैं कि दीर्घवृत्त कहां रहता है, इसलिए यह अवांछनीय स्थितियों में आ सकता है, जैसे पंक्ति में डॉट्स के लिए ।

— वोल्कर ई।

@VolkerE। जानकारी के लिए धन्यवाद। यहां अपडेटेड फील है । कृपया मुझे बताएं कि क्या मुझे आपके स्पष्टीकरण में कोई बिंदु याद आ रहा है।

— Mr_Green

महान समाधान (मूल एक), लेकिन div::beforeइसके बजाय उपयोग क्यों नहीं span? :)

— एडम

@ अदम में कुछ बढ़त का मामला था, इसलिए मैंने छद्म तत्व का उपयोग नहीं किया। ( मुझे अब यह याद नहीं है )

— Mr_Green

Answer 10

यहाँ कई उत्तर हैं लेकिन मुझे एक की आवश्यकता थी:

• केवल सीएसएस
• भविष्य-प्रमाण (समय के साथ अधिक संगत हो जाता है)
• शब्दों को तोड़ने के लिए नहीं जा रहा है (केवल रिक्त स्थान पर टूट जाता है)

चेतावनी यह है कि यह उन ब्राउज़र के लिए एक दीर्घवृत्त प्रदान नहीं करता है जो -webkit-line-clampनियम (वर्तमान में IE, एज, फ़ायरफ़ॉक्स) का समर्थन नहीं करते हैं , लेकिन यह उनके पाठ को फीका करने के लिए एक ढाल का उपयोग करता है।

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

आप इसे इस CodePen में कार्रवाई में देख सकते हैं और आप यहां जावास्क्रिप्ट संस्करण (कोई jQuery) भी देख सकते हैं ।

Answer 11

इस पार्टी में थोड़ी देर हो गई लेकिन मैं साथ आ गया, जो मुझे लगता है, एक अनूठा समाधान है। सीएसएस चालबाजी या js के माध्यम से अपने स्वयं के दीर्घवृत्त डालने की कोशिश करने के बजाय मुझे लगा कि मैं कोशिश करूंगा और केवल एक ही प्रतिबंध के साथ रोल करूंगा। इसलिए मैं हर "लाइन" के लिए पाठ को डुप्लिकेट करता हूं और यह सुनिश्चित करने के लिए एक नकारात्मक पाठ-इंडेंट का उपयोग करता हूं कि एक पंक्ति शुरू होती है जहां अंतिम एक बंद हो जाता है। बेला

सीएसएस:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

फिडल में अधिक जानकारी। ब्राउज़र को फिर से चालू करने के साथ एक समस्या है कि मैं इसके लिए एक जेएस रिड्रा का उपयोग करता हूं और इस तरह इसकी जांच करता हूं लेकिन यह मूल अवधारणा है। किसी भी विचार / सुझाव बहुत सराहना की है।

Comments

मुझे पाठ की प्रत्येक पंक्ति को डुप्लिकेट करने का विचार पसंद नहीं है। इसके अलावा - क्या होगा अगर पाठ गतिशील है - आपको पता नहीं होगा कि कितनी लाइनें जोड़नी हैं। कहा जा रहा है, इस अद्वितीय समाधान के लिए +1!

— डेनियल

इनपुट के लिए धन्यवाद :) डायनामिक टेक्स्ट कोई समस्या नहीं है। इसके बजाय मूल रूप से टेम्पलेट पर कंटेनर की अधिकतम ऊंचाई को परिभाषित करना। यदि आप इसे 3 लाइनों तक सीमित करना चाहते हैं तो 3 बनाइए। मेरे उपयोग के मामले में एक शीर्षक है जो 1-2 लाइनें और एक अंश हो सकता है जो 1-3 हो सकता है। वे ज्ञात मूल्य हैं। कोई फर्क नहीं पड़ता कि स्ट्रिंग कितनी देर है। यदि आप ऐसा किसी टेम्प्लेट स्थिति में करते हैं और स्थैतिक html नहीं करते हैं, तो आप इनलाइन शैली के साथ नकारात्मक टेक्स्ट-इंडेंट को संभाल सकते हैं, इसलिए आपको लाइन 1, लाइन 2, लाइन 3 आदि के बड़े ब्लॉक की आवश्यकता नहीं है, मैं कोड़ा मार सकता हूं। उदाहरण के रूप में js टेम्प्लेट का उपयोग करके एक फ़िडल।

— ल्यूपोस

यदि परियोजना में शब्दों का टूटना कोई मुद्दा नहीं है तो मददगार होगा।

— Mr_Green

Answer 12

धन्यवाद @balpha और @ केविन, मैं दो विधि को एक साथ जोड़ती हूं।

इस विधि में किसी js की आवश्यकता नहीं है।

आप background-imageडॉट्स को छिपाने के लिए उपयोग कर सकते हैं और कोई ढाल की आवश्यकता नहीं है।

innerHTMLकी .ellipsis-placeholderआवश्यक नहीं है, मैं का उपयोग .ellipsis-placeholderएक ही चौड़ाई और ऊंचाई के साथ रखने के लिए .ellipsis-more। आप display: inline-blockइसके बजाय उपयोग कर सकते हैं ।

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

Answer 13

जावास्क्रिप्ट समाधान बेहतर होगा

• पाठ की पंक्तियों की संख्या प्राप्त करें
• is-ellipsisयदि विंडो आकार परिवर्तन या अभिलक्षण बदल जाता है तो टॉगल वर्ग

getRowRects

Element.getClientRects()इस तरह काम करता है

प्रत्येक पंक्ति में एक ही पंक्ति में एक ही topमान होता है, इसलिए इसtop तरह अलग-अलग मानों के साथ पता लगाएं

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

नाव ...more

इस तरह

खिड़की का आकार बदलने या तत्व बदल गया

इस तरह

Answer 14

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

और देखें यहाँ क्लिक करें

Answer 15

एक शुद्ध सीएसएस विधि आधार -webkit-line-clamp पर:

@-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>

Answer 16

मुझे एक जावास्क्रिप्ट चाल मिली, लेकिन आपको स्ट्रिंग की लंबाई का उपयोग करना होगा। मान लें कि आप चौड़ाई 250px की 3 लाइनें चाहते हैं, तो आप प्रति पंक्ति लंबाई की गणना कर सकते हैं

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}

Comments

सबसे अधिक संभावना है, हम हर जगह निश्चित-चौड़ाई वाले फोंट का उपयोग नहीं करते हैं। तो इन स्थितियों में यह चाल विफल हो सकती है।

— ओवलिया