2行にテキスト項目を追加

Question

テキストを2行に変換する必要があり、テキストが2行以上ある場合は楕円が追加されます。

現在、複数の行に折り返して表示されていますので、奇妙です。

何私はCSSでこれまで行われてきた：テキストの長さが短いですが、私は一部の2行と残りの部分で、それは一貫したいとき

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

これは完全に仕事であること（ドットで追加されました。.. ）。

非常に参考になります。

Answer 1

を使用してtext-overflow: elipsis;を使用し、nowrapを使用すると、複数の行が折り返されないため、CSSのみを使用してこれを行うことはできません。ここで

は、jQueryのソリューションで同様の質問です：ここではCSS word ellipsis ('...') after one or two lines

はtext-overflowの異なるバージョンと、それを処理するためのさまざまな方法に専用ページがある：http://dotdotdot.frebsite.nl/

あなたがするjQueryのを必要としています幸いなことに、あなたは多くのコントロールを得ることができ、省略記号よりも優れたビジュアルデザインを見つけることができます。

もちろん、テキストを保持する親要素にスタイルを適用してください。

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