【CSS】テキストの行数を制限し、文末3点リーダーにする方法

※当サイトはアフィリエイト広告を使用しています。

カードや一覧でテキストが長く、スマホで崩れる・読みにくいと感じていませんか。

文末を「…」で示して整えたい方に向けて、CSSだけで解決する方法をまとめます。
本記事では、単一行は text-overflow、複数行は -webkit-line-clamp の使い分けと、幅・行高・overflow の前提条件を簡潔に解説します。

これらを実装すると、表示幅に応じて自然に省略され、一覧の高さがそろい、スマホでも読みやすくなります。
導線が安定し、更新時のレイアウト調整も最小限で済みます。

結論

単一行は text-overflow、複数行は -webkit-line-clamp を使います。
まずは幅や行高さを決め、非対応環境では全文表示でも破綻しない設計にしておくと運用が安定します。

単一行を省略する（text-overflow）

text-overflow: ellipsis; は単一行の末尾を「…」にします。機能させるには、幅指定・折り返し禁止・はみ出し非表示が必要です。

.truncate-1 {
  display: inline-block;   /* インライン要素なら付けます */
  max-width: 220px;        /* 目的に合わせて調整します */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ポイント

要素の幅を決めないと効きにくいです。display: inline のままでは期待通り動かない場合があるため、inline-block か block にします。

複数行を省略する（-webkit-line-clamp）

複数行は -webkit-line-clamp を使います。指定した行数まで表示し、それ以降を切り詰めます。主要ブラウザで実用的に動作します。

.truncate-n {
  --lines: 3;                      /* 表示したい行数 */
  line-height: 1.6;                /* 行高を明示します */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
}

画面幅に応じて行数を切り替える例です。

@media (max-width: 480px) { .truncate-n { --lines: 2; } }
@media (min-width: 481px) { .truncate-n { --lines: 3; } }

ポイント

末尾の記号表示は環境により見え方が異なることがあります。重要な情報は先頭に置き、切れても意味が伝わる文にしておくと安心です。

設計と運用のコツ

レイアウトの幅と行高を先に決めてから省略を適用します。カードや一覧では「続きを読む」や詳細ページへの導線を必ず用意します。見出しやCTAは1～2行で完結する文量に整え、非対応環境では全文表示になっても崩れないことを確認します。

まとめ

• 単一行は text-overflow: ellipsis; を使います。
• 複数行は -webkit-line-clamp を使います。
• 幅・行高・導線を整えれば、スマホでも読みやすく保てます。