Add text item in two line

Question

I have to make text wrap convert into into two line and ellipse will add if the text is more than two line.

Currently it's wrap in multiple line and view look so weird.

What i have done so far in css:

          <div class="list card item-text-wrap" ng-click="getNewsDetail(new)">
            <a  class="item item-thumbnail-left" href="#">
               <img   src="http:{{new.thumbnail}}">
                  <h2>{{new.summary}}</h2>
                   <p style="padding: 0;">{{new.date | date:'EEE, MMM d yyyy'}}  {{new.date |
                  date:'shortTime'}}</p>
            </a>
         </div>

This is work perfectly when text length is short but i want to make it consistent in two line and rest of part is append with dot(...).

Any help would highly appreciate.

So you want it to only wrap to 2 lines the add ellipse? Never have 3 lines? — theblindprophet, Apr 06 '16 at 14:59
Yes it should show text in two lines and other remain character replace with dot(ellipse). @theblindprophet — QuokMoon, Apr 06 '16 at 17:54

score 1 · Answer 1 · edited May 23 '17 at 11:50

So you cannot accomplish this using only CSS because you must use white-space: nowrap; to be able to use text-overflow: elipsis; and nowrap will not let the words wrap down multiple lines.

Here is a similar question with a Jquery solutions: CSS word ellipsis ('...') after one or two lines

Here is a page dedicated to different version of text-overflow and the different ways to handle it: http://dotdotdot.frebsite.nl/

You are going to need JQuery to do this, but luckily you gain a lot of control and may find a better visual design rather than the ellipsis.

Of course, apply any styles to the parent elements holding the text.

e.g.

<!-- HTML -->
<!-- Give class of "date" -->
<p style="padding: 0;" class="date>{{new.date | date:'EEE, MMM d yyyy'}}  {{new.date | date:'shortTime'}}</p>

// Jquery
if ($('.date').height() > 50) {
    var words = $('.date').html().split(/\s+/);
    words.push('...');

    do {
        words.splice(-2, 1);
        $('.date').html( words.join(' ') );
    } while($('.date').height() > 50);
}

Thanks for give a answer . But this will make single line with ellipse . — QuokMoon, Apr 07 '16 at 11:31
Look at the second answer on that stackoverflow question, here is a fiddle https://jsfiddle.net/q4ejn3aa/ — theblindprophet, Apr 07 '16 at 11:47

Add text item in two line

1 Answers1