カテゴリー
お問い合わせ

【CSS】テキストの行数制限＆三点リーダー（…）で省略！-webkit-line-clamp の使い方

HTML/CSS
目次

ブログ記事の一覧やニュースのカードデザインなどで、「タイトルや抜粋文が長すぎる場合は、2行目まで表示して最後を三点リーダー（…）で省略したい」という場面は非常によくあります。

昔はJavaScriptを使って文字数をカウントして切り取っていましたが、現在はCSSの -webkit-line-clamp プロパティを使うだけで、簡単に指定した行数での省略が可能です！

必須となるいくつかのプロパティをセットで記述する必要があるため、今回は忘れた時にサクッとコピペできる備忘録として、1行〜3行制限のデモと一緒に使い方をまとめました！

デモ動作

See the Pen CSSで複数行テキストを省略（-webkit-line-clamp） by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コード紹介

【HTML】

<div class="l-wrap">
  <h2>テキストの行数制限・省略 デモ</h2>
  
  <div class="p-card-list">

    <!-- パターン1: 1行で省略（従来の方法） -->
    <div class="p-card">
      <h3 class="p-card__title">1行で省略（text-overflow）</h3>
      <p class="p-card__text p-card__text--line-1">
        これは1行で省略されるテスト文章です。この後に続く長い文章は表示されず、CSSのプロパティによって最後が三点リーダーに置き換わります。レスポンシブ対応でも崩れません。
      </p>
    </div>

    <!-- パターン2: 2行で省略（-webkit-line-clamp） -->
    <div class="p-card">
      <h3 class="p-card__title">2行で省略（line-clamp）</h3>
      <p class="p-card__text p-card__text--line-2">
        これは2行で省略されるテスト文章です。ブログのカード型レイアウトの抜粋文などで最もよく使われるパターンです。文字量が多い場合でも、2行目の最後で綺麗に三点リーダーになります。
      </p>
    </div>

    <!-- パターン3: 3行で省略（-webkit-line-clamp） -->
    <div class="p-card">
      <h3 class="p-card__title">3行で省略（line-clamp）</h3>
      <p class="p-card__text p-card__text--line-3">
        これは3行で省略されるテスト文章です。ニュースサイトの説明文などで、もう少し情報を多く見せたい場合に使用されます。指定する行数の数字を変えるだけで、どんな行数にも対応できるのがこのプロパティの素晴らしいところです。
      </p>
    </div>

  </div>
</div>

【CSS】

.l-wrap {
  color: #3e3e3e;
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}
h2 { 
  font-size: 16px;
  text-align: center;
  color: #1bb4d4; 
  margin-bottom: 40px; 
}

/* カードのレイアウト */
.p-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.p-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.p-card__title { 
  font-size: 16px; 
  margin-top: 0; 
  color: #1bb4d4; 
  border-bottom: 2px solid #eee; 
  padding-bottom: 8px; 
}

/* 共通のテキストスタイル */
.p-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}


/* =========================================
   行数制限の指定
========================================= */

/* 1行で省略 */
.p-card__text--line-1 {
  overflow: hidden;
  text-overflow: ellipsis; /* これが三点リーダーにする指定 */
  white-space: nowrap; /* テキストを折り返さない */
}

/* 2行で省略（-webkit-line-clampを使用） */
.p-card__text--line-2 {
  display: -webkit-box;            /* 必須 */
  -webkit-box-orient: vertical;    /* 必須：ボックスの配置を縦方向に */
  overflow: hidden;                /* 必須：はみ出た部分を隠す */
  -webkit-line-clamp: 2;           /* ここで制限したい行数を指定！ */
}

/* 3行で省略 */
.p-card__text--line-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;           /* 3行に指定 */
}

コードの解説・必須のプロパティセット

複数行の省略には3つのプロパティが必須！

/* 2行で省略（-webkit-line-clampを使用） */
.p-card__text--line-2 {
  display: -webkit-box;            /* 必須 */
  -webkit-box-orient: vertical;    /* 必須：ボックスの配置を縦方向に */
  overflow: hidden;                /* 必須：はみ出た部分を隠す */
  -webkit-line-clamp: 2;           /* ここで制限したい行数を指定！ */
}

-webkit-line-clamp を効かせるためには、以下の3つを必ずセットで記述する必要があります。

  • display: -webkit-box;
  • -webkit-box-orient: vertical;
  • overflow: hidden;

どれか一つでも欠けると機能しないため、Sassのミックスイン（mixin）などにして使い回すのがオススメです。

Q. 三点リーダー（…）を別の文字に変更できる？

「…（続きはこちら）」のように省略文字を変更したいという要望もありますが、残念ながら -webkit-line-clamp の標準機能では三点リーダー以外の文字に変更することはできません。 CSSの ::after などを使って強引に上書きするハックもありますが、レイアウト崩れの原因になりやすいため、基本的にはデフォルトの三点リーダーを使用するか、JavaScriptで文字数を制御する方法を取るのが一般的です。

1行だけの省略なら text-overflow: ellipsis; を使う

/* 1行で省略 */
.p-card__text--line-1 {
  overflow: hidden;
  text-overflow: ellipsis; /* これが三点リーダーにする指定 */
  white-space: nowrap; /* テキストを折り返さない */
}

今回のデモの1つ目のように、「絶対に1行で省略したい」場合は、white-space: nowrap; と text-overflow: ellipsis; の組み合わせを使用します。用途に合わせて使い分けましょう。

補足：ブラウザ対応状況

より詳しい仕様や最新の対応状況については、以下の公式ドキュメントをご参照ください。

・MDN: text-overflow
・MDN: line-clamp

まとめ

今回は、CSSだけで複数行のテキストを綺麗に省略できる -webkit-line-clamp について解説しました。

特にレスポンシブデザインにおいては、画面幅によってテキストの折り返し位置が変わるため、文字数ではなく「行数」で制限をかけられるこのプロパティは非常に強力です。

必須となるプロパティの記述セットをしっかり覚えて、レイアウト崩れのない綺麗なUIを作っていきましょう！

Prev
Next

関連記事