दो लाइनों पर पाठ अतिप्रवाह इलिप्सिस

Question

मैं जानता हूं कि जब आप अतिप्रवाह (माता-पिता की सीमा से बाहर निकलते हैं) के साथ पाठ को समाप्त करने के लिए सीएसएस नियमों के संयोजन का उपयोग कर सकते हैं।

क्या एक ही प्रभाव को प्राप्त करना संभव है (सिर्फ कहने के लिए स्वतंत्र है, नहीं) लेकिन पाठ को एक से अधिक लाइन पर लपेटने दें?

यहाँ एक डेमो है ।

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

जैसा कि आप देख सकते हैं, पाठ दीर्घवृत्त के साथ समाप्त होता है जब यह div की चौड़ाई से अधिक व्यापक हो जाता है। हालांकि, पाठ के लिए अभी भी पर्याप्त जगह है जो एक दूसरी पंक्ति पर लपेटती है और आगे बढ़ती है। इससे बाधित होता है white-space: nowrap, जिसे कार्य करने के लिए दीर्घवृत्त की आवश्यकता होती है।

कोई विचार?

पुनश्च: कोई जेएस समाधान, शुद्ध सीएसएस यदि संभव हो तो।

Comments

"अंतरिक्ष है" क्या निर्धारित करता है? क्या सेट पिक्सल्स में फ़ॉन्ट ऊंचाई सहित सब कुछ है? यदि कोई अंतिम उपयोगकर्ता अपने ब्राउज़र में फ़ॉन्ट आकार बढ़ाता है तो क्या होगा?

— जोएल एथरटन

डुप्लिकेट stackoverflow.com/questions/6222616/…

— टॉम

@JoelEtherton मुझे लगता है कि ब्राउज़र के लिए यह तय करना है और हाँ, मेरे मामले में सब कुछ पिक्सेल में है।

— टोनी बोगदानोव

यह एक अच्छा समाधान हो सकता है: stackoverflow.com/questions/6222616/…

— ivy

यह एक बहुत अच्छी तरह से पढ़ा हैकिंगुईई

— एफआरएंड /

Answer 1

मुझे यकीन है कि आप देखा है, तो नहीं कर रहा हूँ इस है, लेकिन क्रिस Coyier उत्तम CSS-Tricks.com यह एक समय पहले के लिए एक लिंक पोस्ट किया है और यह एक शुद्ध सीएसएस समाधान है कि वास्तव में आप क्या चाहते हैं पूरा करता है।

(कोडपेन पर देखने के लिए क्लिक करें)

HTML:

<div class="ellipsis">
    <div>
        <p>
            Call me Ishmael. Some years ago – never mind how long precisely – 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 – then, I account
            it high time to get to sea as soon as I can.
        </p>
    </div>
</div>

सीएसएस:

html,body,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-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
    �background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    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);
    }

बेशक, शुद्ध सीएसएस समाधान होने का मतलब है कि यह एक बहुत जटिल है, लेकिन यह साफ और सुरुचिपूर्ण ढंग से काम करता है। मैं यह मानूंगा कि जावास्क्रिप्ट प्रश्न से बाहर है क्योंकि जावास्क्रिप्ट के साथ यह (और यकीनन अधिक अपमानजनक) हासिल करना बहुत आसान है।

एक अतिरिक्त बोनस के रूप में, पूर्ण प्रक्रिया की एक डाउनलोड करने योग्य ज़िप फ़ाइल है (यदि आप इसे और सभी को समझना चाहते हैं), लेकिन यह भी एक SASS मिक्सिन फ़ाइल है ताकि आप इसे अपनी प्रक्रिया में आसानी से पा सकें।

उम्मीद है की यह मदद करेगा!

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

Comments

मैंने अभी-अभी एक एंड्रॉइड फोन पर आपके कोडपेन लिंक पर क्लिक किया और इसने फ़ायरफ़ॉक्स में काम किया। यह किस प्लेटफ़ॉर्म / ब्राउज़र में काम नहीं कर रहा है?

— दशहरा २ d

uploady.com/#//download/kAwBXv1CqXg/PU68wrP6QzGgydlS मैं क्रोम का उपयोग कर रहा हूं और पूर्वावलोकन में कोई दीर्घवृत्त नहीं हैं। पाठ की पंक्तियों को जोड़ते रहें, कुछ नहीं होता है। कितनी लाइनों के बाद यह दीर्घवृत्त दिखाना शुरू कर देगा?

— कोडिंग_डॉट

आपके द्वारा अपलोड किए गए अपलोडिंग लिंक में, पाठ स्पष्ट रूप से कंटेनर से अधिक नहीं निकला है। निर्धारित कंटेनर में प्रदर्शित होने से पहले पाठ को प्रदर्शित करने के लिए पाठ बहुत अधिक होना चाहिए। बस प्रभाव देखने के लिए पाठ जोड़ते रहें।

— दशहरा

@ MarcosPérezGude - मुझे आश्चर्य नहीं है। के साथ कहा कि >> "बेशक, एक शुद्ध सीएसएस समाधान होने का मतलब है कि यह भी एक बहुत जटिल है ..." <<

— dashard

Answer 2

आसान सीएसएस गुण चाल कर सकते हैं। निम्नलिखित तीन-पंक्ति दीर्घवृत्त के लिए है।

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

Comments

यह फ़ायरफ़ॉक्स में काम नहीं करता है। केवल क्रोम, सफारी और ओपेरा

— anyavacy

कैनुएज़ के अनुसार , यह कहता है कि "यह संभावना नहीं है कि अन्य ब्राउज़र संपत्ति का समर्थन करेंगे जैसा है"। तो सिर चढ़ जाता है।

— मटन बोबी

चिकनी दोस्त .. बहुत मददगार

— वैलेंटिनो परेरा

फ़ायरफ़ॉक्स में भी gr8 काम करता है

— निश्रग शाह

अब बहुत समर्थन है लगता है: caniuse.com/#search=line-clamp

— जोआओ

Answer 3

इस शुद्ध सीएसएस संस्करण पर एक नज़र डालें: http://codepen.io/martinwolf/pen/qlFdp

display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;

Comments

यह वास्तव में अच्छा है, बहुत बुरा यह केवल webkit है। यहाँ इस मामले पर एक दिलचस्प लेख है: css-tricks.com/line-clampin

— टोनी बोगडानोव

आप दो text-overflowऔर displayनियम क्यों घोषित करते हैं ?

— j08691

एक बड़ा WoooW। Ive को लाइन-क्लैम्प से पहले कभी नहीं देखा गया

— माइक एरोन

बस FYI करें, यह फ़ायरफ़ॉक्स में इन दिनों ठीक काम करता है, साथ ही साथ। महान समाधान!

— Athoxx

केवल 1 प्रश्न, जब मेरे पास एक पंक्ति या पाठ की दो पंक्तियाँ होती हैं, जो मैं उन्हें केन्द्रित करना चाहता हूँ, तो मैं यह कैसे करूँ, यदि मैं प्रदर्शन फ्लेक्स जोड़ता हूँ तो मैं दीर्घवृत्त खो देता हूँ, ऐसा लगता है कि यह केवल तभी काम करता है यदि प्रदर्शन:

— -bbkit

Answer 4

नीचे सीएसएस को चाल करना चाहिए।

दूसरी पंक्ति के बाद, पाठ शामिल होगा ...

line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

Comments

यह अच्छी तरह से काम किया है, लेकिन मुझे जोड़ने के लिए थाoverflow:hidden

— timhysniu

Answer 5

यदि ऊपर काम नहीं कर रहा है तो इसका उपयोग करें

 display: block;
 display: -webkit-box;
 max-width: 100%;
 margin: 0 auto;
 -webkit-line-clamp: 2;
 /* autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
 overflow: hidden;
 text-overflow: ellipsis;

Answer 6

मेरा समाधान amcdnl में से एक का पुन: उपयोग करता है, लेकिन मेरी वापसी में टेक्स्ट कंटेनर के लिए एक ऊंचाई का उपयोग करना शामिल है:

.my-caption h4 {
    display: -webkit-box;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    height: 40px;/* Fallback for non-webkit */
}

Comments

-webkit-line-clamp IE11, Edge, या फ़ायरफ़ॉक्स के लिए काम नहीं करता है।

— Ga

@ जीरी, आप सही कह रहे हैं, उस समय आपको जेएस फिक्स की आवश्यकता होती थी, लेकिन अब यह ठीक काम करता है। caniuse.com/#search=webkit-line-clamp

— VincentPerrin.com

Answer 7

स्टैकव्यूफ़्लो में देखे गए उत्तर के आधार पर, मैंने इस LESS मिक्सिन को बनाया ( सीएसएस कोड उत्पन्न करने के लिए इस लिंक का उपयोग करें ):

.max-lines(@lines: 3; @line-height: 1.2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  line-height: @line-height;
  max-height: @line-height * @lines;
}

प्रयोग

.example-1 {
    .max-lines();
}

.example-2 {
    .max-lines(3);
}

.example-3 {
    .max-lines(3, 1.5);
}

Answer 8

यह दो वर्गों के संयोजन से अधिक सुरुचिपूर्ण लगता है। आप two-linesकक्षा को छोड़ सकते हैं यदि केवल एक पंक्ति को देखें:

.ellipse {
          white-space: nowrap;
          display:inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
       }
      .two-lines {
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
      }
      .width{
          width:100px;
          border:1px solid hotpink;
      }

        <span class='width ellipse'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

       <span class='width ellipse two-lines'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

Answer 9

कुछ पंक्तियों पर प्रतिबंध लगाना लगभग सभी ब्राउज़रों में काम करेगा, लेकिन फ़ायरप्लेस और IE में एक दीर्घवृत्त (3 डॉट्स) प्रदर्शित नहीं किया जाएगा। डेमो - http://jsfiddle.net/ahzo4b91/1/

div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
}

Answer 10

          text-overflow: ellipsis;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-height: 36px;
          max-height: 18px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

मुझे लाइन-क्लैंप और लाइन-ऊंचाई दोनों कार्यों का कॉम्बो मिला है: डी

Answer 11

मेरे कोणीय ऐप में निम्नलिखित शैली ने दूसरी पंक्ति पर पाठ के अतिप्रवाह पर दीर्घवृत्त प्राप्त करने के लिए मेरे लिए काम किया :

 <div style="height:45px; overflow: hidden; position: relative;">
     <span class=" block h6 font-semibold clear" style="overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        line-height: 20px; /* fallback */
        max-height: 40px; /* fallback */
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;">
        {{ event?.name}} </span>
 </div>

आशा है कि यह किसी की मदद करता है।

Answer 12

Scss में काम करने वालों के लिए , आपको !autoprefixerटिप्पणी की शुरुआत में जोड़ना होगा ताकि यह पोस्टस्कॉल्स के लिए संरक्षित रहे:

मैंने उस मुद्दे का सामना किया, इसीलिए इसे यहां पोस्ट कर रहा हूं

line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

संदर्भ

Answer 13

आप दीर्घवृत्त, शुद्ध सीएसएस के बजाय एक विघटित प्रभाव का उपयोग कर सकते हैं और अधिक पेशेवर दिख सकते हैं:

    <div style="width: 293px; height:48px; overflow: hidden; ">
        More than two line of text goes here-More than two line of text goes here
    </div>
    <div style="position: relative; top: -24px; width: 293px; height:24px; 
             background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
    </div>

यहाँ मैंने माना है कि आपकी पृष्ठभूमि का रंग सफ़ेद है।

Answer 14

यह कुल हैक है, लेकिन यह काम करता है:

http://jsfiddle.net/2wPNg/

div {
    width: 30%;
    float: left;
    margin-right: 2%;
    height: 94px;
    overflow: hidden;
    position: relative;
}

div:after {
     display: block;
      content: '...';
      width: 1em;
  height: 1.5em;
  background: #fff;
  position: absolute;
  bottom: -6px;
  right: 0;
    }

इसमें समस्याएं हैं .... यह एक पत्र को अजीब तरह से काट सकता है, और संभवतः एक संवेदनशील साइट पर कुछ अजीब परिणाम होंगे।

Comments

यह सही समाधान नहीं होगा क्योंकि यदि सामग्री छोटी है तो यह अंत में '...' भी जोड़ देगा। फिडल: jsfiddle.net/2wPNg

— सचिन

Answer 15

यहाँ jQuery का उपयोग करके दीर्घवृत्त का प्रबंधन करने के लिए एक सरल स्क्रिप्ट है। यह तत्व की वास्तविक ऊंचाई का निरीक्षण करता है और यह एक छिपा मूल नोड और एक छोटा नोड बनाता है। जब उपयोगकर्ता क्लिक करता है तो यह दो संस्करणों के बीच स्विच करता है।

महान लाभों में से एक यह है कि "एलिप्सिस" अंतिम शब्द के पास है, जैसा कि अपेक्षित था।

यदि आप शुद्ध CSS समाधानों का उपयोग करते हैं तो तीन बिंदु अंतिम शब्द से दूर दिखाई देते हैं।

function manageShortMessages() {

        $('.myLongVerticalText').each(function () {
            if ($(this)[0].scrollHeight > $(this)[0].clientHeight)
                $(this).addClass('ellipsis short');
        });

        $('.myLongVerticalText.ellipsis').each(function () {
            var original = $(this).clone().addClass('original notruncation').removeClass('short').hide();
            $(this).after(original);

            //debugger;
            var shortText = '';
            shortText = $(this).html().trim().substring(0, 60) + '...';
            $(this).html(shortText);
        });
        
        $('.myLongVerticalText.ellipsis').click(function () {
            $(this).hide();

            if ($(this).hasClass('original'))
            {
                $(this).parent().find('.short').show();
            }
            else
            {
                $(this).parent().find('.original').show();
            }
        });
    }
	
  manageShortMessages();

div {
 border:1px solid red;
 margin:10px;
}

div.myLongVerticalText {
  height:30px;
  width:450px;
}

div.myLongVerticalText.ellipsis {
 cursor:pointer;
}

div.myLongVerticalText.original {
  display:inline-block;
  height:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myLongVerticalText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada.

Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt.
</div>


<div class="myLongVerticalText">
One Line Lorem ipsum dolor sit amet.  
</div>
</body>

Comments

यदि आप इस समाधान को कम करते हैं, तो कृपया बताएं कि यहां क्यों, मैं इसकी सराहना करता हूं।

— मत्तेयो कोंटा

ओपी ने सीएसएस समाधान के लिए कहा और आपने jQuery की पेशकश की?

— दशहरा

मैंने याद किया कि यह जावास्क्रिप्ट की अनुपस्थिति की एक मजबूत आवश्यकता थी, मेरे मामले में शुद्ध सीएसएस समाधान ने प्रतिपादन समस्याओं को प्रस्तुत किया, jQuery समाधान ने मुझे अंतिम प्रतिपादन और दीर्घवृत्त स्थिति पर अधिक नियंत्रण दिया।

— Matteo Conta

बिलकुल सहमत। मेरे जवाब में मैंने नोट किया कि जेएस के साथ हासिल करना आसान था।

— दशहरा

Answer 16

निश्चित नहीं है कि आपका लक्ष्य क्या है, लेकिन क्या आप चाहते हैं कि पाठ दूसरी पंक्ति में आए?

यहाँ आपका jsFiddle: http://jsfiddle.net/8kvWX/4/ बस निम्नलिखित को हटा दिया गया है:

     white-space:nowrap;  

मुझे यकीन नहीं है कि यह वही है जो आपकी तलाश में है या नहीं।

सादर,

मी

Comments

वह दूसरी पंक्ति के अंत में दीर्घवृत्त चाहता है, जो जावास्क्रिप्ट के बिना करना इतना आसान नहीं है ...

— मार्क ऑडिट

@MarcAudet बिल्कुल :)

— टोनी बोगदानोव

ठीक है, जैसा कि मैंने एक अन्य व्यक्ति को दूसरी पंक्ति पर लाइनों के लिए पूछ रहा था और उसका सीएसएस आपके जैसा ही था, लेकिन वर्ग इसके बजाय उल टैग को इंगित कर रहा था। वैसे भी, टोनी क्षमा करें। मुझे इस पर एक बार फिर से नज़र डालनी होगी और यदि मैं सफल हो गया तो अपने उत्तर को अपडेट करूंगा।

— Mee

अच्छी तरह से मुझे लगता है कि सबसे अच्छा समाधान @Itay Gal से एक है। जहां तक ​​मैंने देखा कि एक काम कर रहा है।

— Mee