CSSで複数行のテキストを省略する｜-webkit-line-clampの使い方

CSSの -webkit-line-clamp を使うと、テキストを指定した行数に制限して省略表示できます。

例えば、文章を3行まで表示し、それ以降を「…」で省略するといった表示が可能です。

カード型のレイアウトなどで、文章の長さが異なる場合でも表示領域を揃えたいときに便利です。

-webkit-line-clampの基本的な使い方

例えば、テキストを3行まで表示する場合は、次のように指定します。

HTML

<p class="box01">
  この例では、 <code>-webkit-line-clamp</code> プロパティを 3 に設定すると、テキストは 3 行目の後で切られます。テキストが切られた点には省略記号が表示されます。
</p>

CSS

.box01 {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

-webkit-line-clamp: 3; と指定すると、テキストを3行まで表示し、それ以降を省略できます。

この方法では、次の3つの指定を組み合わせます。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

それぞれの役割は次のとおりです。

さらに、指定した行数を超えた部分を隠すために overflow: hidden; も指定します。

CodePenデモ

-webkit-line-clamp は、文章を指定した行数で制限するため、必ずしも文末の区切りのよい位置で省略されるとは限りません。
特にリンクなどに適用した場合、テキストの途中で切れることがあります。

重要な文章を省略表示する場合は、全文を確認できる導線を用意するなど、ユーザーが内容を確認できるようにしておきましょう。

-webkit-line-clamp は従来から広く使われている方法ですが、実際のWebサイトで使用する際は、対象とするブラウザーの対応状況を確認しておくと安心です。

特に、古いブラウザーへの対応が必要な場合は、対象ブラウザーで意図した表示になるか確認しましょう。

-webkit-line-clampを使うと、テキストを指定した行数に制限して省略表示できる
-webkit-line-clamp の数値を変更することで、表示する行数を調整できる
使用する際は、display: -webkit-box;、-webkit-box-orient: vertical;、overflow: hidden; とあわせて指定する