दूसरी पंक्ति में css दीर्घवृत्त

Question

सीएसएस 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 ... 

Comments

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

— FarligOpptreden

यहाँ एक ऐसा ही सवाल है: stackoverflow.com/questions/3922739/…

— एवगेनी

tl; dr: यह केवल वेबकिट में संभव है

— एवगेनी

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

— जोनाथन

Answer 1

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

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

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

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

EDIT 2 WebKit / Blink में line-clamp: -webkit-line-clamp: 22 पंक्ति पर दीर्घवृत्त डाला जाएगा।

Comments

निगरानी रखना, लेकिन अभी तक लगता है कि देवता अभी हमारे साथ नहीं हैं: caniuse.com/#search=max-lines

— डैनियल

उपरोक्त सुविधा कैसे प्राप्त करें कि सास के साथ? @ रूडी

— भूमि भालानी

Answer 2

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

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

Comments

ध्यान दें कि, इस टिप्पणी के रूप में, -webkit-line-clamp दृश्यता का सम्मान नहीं करता है: छिपा हुआ। Bugs.webkit.org/show_bug.cgi?id=45399

— केविन

अरे - अच्छा लगता है लेकिन मेरे लिए काम नहीं करता है। यह बस दिए गए लाइन-क्लैंप पर '...' डालता है, लेकिन टेक्स्ट के बाकी हिस्से (यहां तक ​​कि व्हाइट-स्पेस

— अटेर के साथ

overflow: hiddenकाम करने के लिए आपको इसे जोड़ना पड़ सकता है ।

— रॉबर्ट

यह फ़ायरफ़ॉक्स में काम नहीं करेगा,

— जेकपो

यह स्वीकृत उत्तर होना चाहिए। आप जिस तत्व को लागू करते हैं, उसके तल पर आप कोई भी पैडिंग नहीं चाहते हैं, क्योंकि आप पाठ के शेष भाग को झांक सकते हैं।

— 15

Answer 3

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

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

यहाँ एक jsFiddle है ।

Comments

यह प्लगइन बहुत सी अन्य उपयोगिताओं को भी प्रदान करता है जैसे "अधिक पढ़ें" लिंक, यह URI और HTML मार्कअप को पार्स भी कर सकता है। अच्छा खोजो!

— मार्टिन एंडरसन

मैंने एक ईकॉमर्स स्टोर के लिए jQuery dotdotdot 1.7.3 की कोशिश की, एक ग्रिड श्रेणी पृष्ठ पर उत्पाद के नाम को दो पंक्तियों तक सीमित करने के लिए। पूरी तरह से परीक्षण के बाद, हमने इस प्लगइन के साथ नहीं जाने का फैसला किया क्योंकि कभी-कभी, एक शिफ्ट-रिफ्रेश के बाद, श्रेणी पृष्ठ लेआउट टूट जाएगा। YMMV। अंत में हम एक बहुत ही सरल वेनिला जेएस समाधान के साथ गए: यदि उत्पाद का नाम तत्व का क्लाइंटहाइट अपने स्क्रॉलहाइट से कम है, तो प्रीसेट सीमा पर पाठ को छोटा करें और "..." करें। कभी-कभी कुछ उत्पाद नाम पूर्व निर्धारित सीमा के कारण बहुत कम हो सकते हैं, लेकिन यह सुपर स्थिर है।

— 30

ईस्टी को लागू करने और खूबसूरती से काम करने के लिए। धन्यवाद!

— राहेल एस।

हालांकि यह अच्छा काम करता है, दुर्भाग्य से यह प्रदर्शन के मुद्दों से ग्रस्त है। यदि आपकी परियोजना के लिए कई दीर्घवृत्तीय उपयोगों की आवश्यकता है, तो दूसरे विकल्प पर विचार करें। इसके अलावा यहाँ रिपॉजिटरी का एक उद्धरण है: "क्योंकि इसके प्रदर्शन में सुधार नहीं किया जा सकता है, यह प्लगइन अब सक्रिय रूप से बनाए नहीं रखा गया है।"

— बॉयोमरिनोव

अगर लोडिंग के बाद पाठ गतिशील रूप से बदलता है, तो भी यह काम नहीं करेगा :(

— देजेल

Answer 4

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

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

Answer 5

अगर कोई इस प्रश्न पर SASS / SCSS और ठोकर का उपयोग कर रहा है - शायद यह मिश्रण मदद का हो सकता है:

@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');
}

यह केवल वेबकिट ब्राउज़र में दीर्घवृत्त जोड़ता है। बाकी बस इसे काट दिया।

Comments

कम का उपयोग करना, मैं बदलना पड़ा /* autoprefixer: off */करने के लिए /*! autoprefixer: off */अन्यथा -webkit-box-orient: vertical;संकलन के बाद हटा मिल रही थी, जिसका मतलब है कि अंडाकार से पता चला कभी नहीं

— नाथन

Answer 6

बस ब्राउज़रों के लिए लाइन-क्लैंप का उपयोग करें जो इसे (सबसे आधुनिक ब्राउज़र) का समर्थन करते हैं और पुराने के लिए 1 पंक्ति में वापस आते हैं।

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

Comments

सफेद-स्थान: प्रारंभिक; मुझे बचाया

— जेम्स

Answer 7

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

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

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

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

Comments

यह प्लगइन जिस तरह से करता है उसके लिए बहुत भारी है। यह 5 साल पुराना है। बल्कि dotdotdotकिसी अन्य पोस्ट में उल्लेख किया गया है।

— adi518 16

Answer 8

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

HTML:

<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);
}

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

लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। मोरबी
एलिमेंट अजात यातना…

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

यहाँ jsFiddle है ।

Answer 9

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

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

Comments

बहुत अच्छा समाधान, बस यह ग्रंथों को रौंद देता है, भले ही दूसरी पंक्ति छंटनी करने के लिए बहुत छोटी हो, लेकिन फिर भी, अंगूठे

— अमन

Answer 10

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

संपादित करें: आपने एक डेमो बनाया - ध्यान दें कि मैंने jquery.condense.js को उस डेमो से जोड़ा है जो जादू करता है, इसलिए उस प्लगइन के लेखक को इसका पूरा श्रेय :)

Answer 11

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

Answer 12

इलिप्सिस के साथ ट्रिम मल्टीलाइन टेक्स्ट का शुद्ध सीएसएस तरीका

टेक्स्ट कंटेनर की हाईट को समायोजित करें, -webkit-line-clamp द्वारा नियंत्रण रेखा: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 13

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

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

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

Answer 14

यदि कोई फ्लेक्सबॉक्स में काम करने के लिए लाइन-क्लैंप प्राप्त करने की कोशिश कर रहा है , तो यह थोड़ा पेचीदा है - विशेष रूप से एक बार जब आप वास्तव में अन्य शब्दों के साथ यातना परीक्षण कर रहे हैं। टुकड़ा हैं इस कोड में केवल वास्तविक मतभेद 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>

http://codepen.io/AlgeoMA/pen/JNvJdx (कोडपेन संस्करण)

Answer 15

यहां सभी उत्तर गलत हैं, उन्हें महत्वपूर्ण टुकड़ा, ऊंचाई गायब है

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

Answer 16

शुद्ध सीएसएस विधि आधार -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 17

ऐसा करने का कोई वास्तविक आसान तरीका नहीं है। Clamp.js लाइब्रेरी का उपयोग करें ।

$clamp(myHeader, {clamp: 3});

Answer 18

मुझे एक समाधान मिला, हालांकि आपको एक मोटे चरित्र की लंबाई जानने की जरूरत है जो आपके पाठ क्षेत्र में फिट होगी, फिर ... पूर्ववर्ती स्थान पर ... से जुड़ें।

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

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

कोड:

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

यहाँ एक पहेली है - http://jsfiddle.net/GYsW6/1/