【CSS】テキストを…で省略する

コード

テキストをpタグで囲み、その外側をdivタグで以下のように囲んでください。

<div class="text-wrapper">
 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

親要素のtext-wrapperに対して、以下のCSSをつけます。

  .text-wrapper{  
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //何行まで表示するか
    max-height: 40px; //fontサイズや行間に合わせて適宜調整
}

完成見本