CODEWITHSUNDEEP
cssionic-frameworkionic-view
QuokMoon
QuokMoon

Reputation: 4425

Add text item in two line

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.

Upvotes: 0

Views: 625

Answers (1)

theblindprophet
theblindprophet

Reputation: 7927

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

Upvotes: 1

Related Questions