【複数行対応】たった4行のCSSで、長すぎる文章を3点リーダーで省略する

こんにちは。

例えばブログサイトを作るとき、記事一覧にタイトルや本文の抜粋が載っていると思います。それらの文章が長すぎるとレイアウトを崩す原因になってしまいますから、何らかの方法で省略をする必要があります。

バックエンドアプリケーション側で文字数を制限すると言う方法もありますが、「何文字に制限するとレイアウトを崩さないか」は見た目側の都合ですから出来ればフロントエンドで解決したいところです。

文章の省略方法は様々ですが、3点リーダーの場合はCSSのみで簡単に実装できます。その方法を紹介していきます。

結論
解説
注意点
まとめ

結論

<body>
  <div class="Text">
    親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
  </div>
</body>

.Text {
  margin: auto;
  border: 1px solid #000;
  width: 100%;
  max-width: 800px;
  line-height: 1.5;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

上記のコードで、3点リーダーによる省略ができます。

下に例を置きました。PCでご覧の方はブラウザの横幅を縮めたり伸ばしたりしてみてください。文章がきちんと行数で省略されていることがわかると思います。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）

解説

重要なのは、上記コードの内CSSの下4行です。

.Text {
  ...省略

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

見慣れないプロパティが多いと思いますが、「-webkit-line-clamp」というプロパティが行数の制限をかけています。どのように使うか詳しくはMDN（https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp）に書かれている訳ですが、ポイントをまとめます。

-webkit-line-clamp: 数値; と指定すると、その数値の行数以上になるときは3点リーダーで省略する。
display: -webkit-box;（もしくはdisplay: -webkit-inline-box;）かつ-webkit-box-orient: vertical;の時にのみ使用できる。
多くの場合、overflow: hidden; を併用する。

1, 2に関してはそういうルールになっているからとしか言いようがないので覚えましょう。display: -webkit-box;にしていないと-webkit-line-clampを指定しても効かないので注意です。

3に関しては、逆にoverflow: hidden;でない場合の挙動を見るとよく分かります。overflow: hidden;でない場合は本来省略されてるはずの文章も見えてしまうのです（下図）。

そういうわけで、ほとんどの場合overflow: hidden;を併用することになるでしょう。

注意点

もし要素に縦方向のpaddingがあると、省略したはずの文章が見えることがあります。

.Text {
  margin: auto;
  margin-top: 100px;
  border: 1px solid #000;
  width: 100%;
  max-width: 800px;
  padding: 20px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

この場合は親要素にpaddingをつけたり、そのためのdivを1つ用意するなど工夫をしましょう。

まとめ

ということで、CSSだけで文章を省略する方法でした。毎回JavaScriptで書いていた人もぜひお試しください。