【5秒で解決】CSS,HTMLで見出しなどを文字数制限(行数制限)をかけて(…)によって省略して表示する方法

はじめに

WordPressなどを用いたブログサイトの投稿記事などで、
長いタイトルや文章を省略したい場面ってよくありますよね。
この記事では、CSSのみでテキストの文字数(正確には行数)に制限をかけて、
三点リーダー(…)によって省略する方法を紹介します。

CSSで文字制限(行数制限)をかけて(…)によって省略して表示する方法

今回はこちらのHTMLに行数を制限するCSSを充てていきたいと思います。

<p class="text">
　サンプルテキストサンプルテキストサンプルテキスト
　サンプルテキストサンプルテキストサンプルテキスト
　サンプルテキストサンプルテキストサンプルテキスト
</p>

テキストを一行に制限する場合

テキストを一行に制限する場合は、以下のCSSをコピーするだけで大丈夫です。

.text {
  white-space: nowrap;  /* 行の折り返しを防止 */
  overflow: hidden;  /* はみ出る分の文字を隠す */
  text-overflow: ellipsis;  /* 文末に3点リーダー(...)を表示 */
}

テキストを指定した行数(複数行)に制限する場合

テキストを指定した行数に制限する場合も、以下のCSSをコピーして、
行数を任意の数字に変えるだけで大丈夫です。

.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 行数を指定(任意の数字に変更) */
}

注意点

基本的には、これらのコードをテキスト制限したい要素にコピーするだけで実装可能ですが、
一つ注意点があります。

それは、行数を制限する要素にpaddingを使用しないことです！

paddingをテキスト制限する要素に直接使用すると、うまく表示されなくなります。
しかし、行数を制限する要素にpaddingが必要な場面は実案件でもよくあります。

その場合は、行数を制限する要素をdivタグで囲い、
そのdivタグにpaddingを使用することで解決できます！

<div class="text-wrapper">
  <p class="text">
　  サンプルテキストサンプルテキストサンプルテキスト
　  サンプルテキストサンプルテキストサンプルテキスト
　  サンプルテキストサンプルテキストサンプルテキスト
  </p>
</div>

.text-wrapper {
   padding: 16px;
}
.text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

このようなコードを書くことで、行数を制限する要素にpaddingを使用することが可能になります。

まとめ

今回は、CSSで行数(文字数)制限をかけて(…)によって省略して表示する方法を解説しました！
使用する機会も多いので、使い回しできるように、スニペット登録しておく事をおすすめします。

参考になれば幸いです。