概要

line-clampプロパティは、CSSでテキストの表示行数を制限するための機能です。指定した行数を超えるテキストは省略され、最後に「…」が表示されるため、コンテンツの見た目がすっきりと整います。このプロパティは特に、記事のプレビューやカードデザインなど、テキストを限られたスペースに収めたい場合に非常に役立ちます。

line-clampプロパティの概要

line-clampは直接的なCSSプロパティではなく、flexboxの特性を活用してテキストを特定の行数に制限する手法です。通常、以下のプロパティと組み合わせて使用します：

  • display: -webkit-box;
    テキストをボックスレイアウトに変換します。

  • -webkit-box-orient: vertical;
    ボックスの方向を縦に設定します。

  • -webkit-line-clamp: 行数;
    表示する行数を指定します。

line-clampプロパティの使い方

基本的な使用方法

以下は、line-clampプロパティを使ってテキストの行数を制限する方法です。

.clamped-text {
  display: -webkit-box; /* 必須：ボックスレイアウトに変換 */
  -webkit-box-orient: vertical; /* 必須：縦方向にレイアウト */
  -webkit-line-clamp: 3; /* 表示する行数を指定 */
  overflow: hidden; /* 超過部分を隠す */
}

このコードを適用することで、テキストが3行まで表示され、それ以上は非表示となります。非表示部分は「…」で表され、ユーザーに長いテキストであることを視覚的に示します。

応用例 - ブログカードでの使用

ニュース記事やブログカードなど、限られたスペースでテキストを整える場合にline-clampは非常に便利です。以下の例は、ブログの概要テキストを3行に制限しています。

<div class="blog-card">
  <h2>ブログ記事のタイトル</h2>
  <p class="clamped-text">
    この記事では、最新の`CSS`技術を使ったレイアウトの作り方について解説します。特にFlexboxやGridの使い方を詳しく説明し、実践的なサンプルコードもご紹介します。ぜひ参考にしてください。
  </p>
</div>

.blog-card {
  border: 1px solid #ddd;
  padding: 16px;
  max-width: 300px;
}
.clamped-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

line-clampの注意点

  • line-clampはWebKitベースのブラウザ（ChromeやSafariなど）でのサポートが一般的ですが、Firefoxや他のブラウザでも類似の動作をさせるには異なるアプローチが必要です。
  • 必要に応じてJavaScriptでテキストを動的にカットする実装を追加することで、すべてのブラウザで同様の見た目を保つことが可能です。

他のプロパティとの連携

overflowとtext-overflow

overflowプロパティは、指定された領域を超えた内容をどのように表示するかを決定します。例えば、hiddenを指定することで、超えたテキストが見えなくなります。また、text-overflow: ellipsis;を使うと、行の最後に「…」が表示されます。

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

この例は、line-clampのようにテキストのカットは行わず、単一行でのみ「…」を表示するケースに使われます。

line-clampを活用するメリット

  • デザインの一貫性: 記事の見出しや紹介文の長さを統一することで、ページ全体のデザインが整います。
  • 読みやすさの向上: ユーザーが読みやすい範囲で情報が提示され、重要な内容を迅速に伝えることができます。
  • スペースの有効活用: カードレイアウトやリスト表示の中で、限られたスペースに多くの情報を詰め込むことが可能です。

まとめ

line-clampプロパティは、見た目と使いやすさを両立させる優れたテキスト制御手法です。ニュースやブログの概要、商品説明など、多くの場面で役立つため、積極的に活用することをお勧めします。

  • 指定行数以上のテキストを「…」で非表示にすることで、ページ全体の整合性を保てます。
  • デザインが崩れないため、コンテンツを見やすく整理できます。
  • 多言語対応や他のプロパティと組み合わせることで、さらに高度なテキスト制御が可能です。

参照:

`CSS` line-clamp | MDN Web Docs