【CSS】〇行以上になったら「…」にする行数制限-webkit-line-clamp

どうも、くまだです。

とある案件で、例えばブログの記事タイトルや本文の抜粋が2行以上になったら文の末尾に、… をつけるというCSSのやり方を最近知りました。自分で知ったわけではなく、クライアント様から教えられたものです。

CSSで、文章が2行以上になったら…にする

WordPressのPHPで行数制御できるのですが、一応こういうやり方もあるんだな～と思ってもらえれば。

例えば、以下のようなHTMLがあったとします。

  <div class="box">
    <p class="box__text">仮の文章です。仮の文章です。仮の文章です。仮の文章です。仮の文章です。仮の文章です。仮の文章です。</p>
  </div>

CSSには以下のような記述をします。

.box {
  width: 240px;
}

.box__text {
  font-size: 20px;
  
}

文末省略のスタイルは何も指定していないので、当然そのまま表示されます。ここで行数が2行以上になったら文末が、「…」になるように以下のCSSを指定します。

.box__text {
  font-size: 20px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

文末が…に変わりました。ブログの記事タイトルなど動的に変化する部分で使えそうな感じです。PHPでも似たようなことはできますが、一応CSSでもこういうことはできます。

webkit-line-clampの「2」のところで行数を指定しています。もし3行以上で「…」にしたかったら3に変更すればいいだけです。

-webkit-line-clamp – CSS: カスケーディングスタイルシート | MDN

-webkit-line-clamp は CSS のプロパティで、ブロックコンテナーの内容を指定した行数に制限することができます。

developer.mozilla.org

displayプロパティに、-webkit-boxが設定されていて、かつbox-orientにvertibalが設定されているときのみ使用できます。なお、box-orientは標準機能ではなく標準化の予定もないとのこと。

box-orient – CSS: カスケーディングスタイルシート | MDN

box-orient は CSS のプロパティで、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。

developer.mozilla.org

なので実際に使用するかどうかは考慮しなければなりませんが、こういう方法もある、と頭の片隅に置いておいてもらえれば。

ここまで読んでくださりありがとうございました。