Documentation CSS

概要

line-clampプロパティは、CSSでテキストの表示行数を制限し、超過したテキストを省略記号（…）で表示するための機能です。ブログカード、商品リスト、ニュース一覧など、限られたスペースにテキストを収める必要があるUIコンポーネントで広く活用されています。

この記事では、line-clampの基本的な使い方から実践的な応用パターン、ブラウザ互換性の対処法まで詳しく解説します。

line-clampの基本

line-clampを使用するには、いくつかの関連プロパティを組み合わせる必要があります。これはWebKitベースの実装に由来するためです。

必須プロパティの組み合わせ

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

各プロパティの役割

プロパティ役割
display: -webkit-boxフレックスボックスのような特殊なレイアウトモードを有効化
-webkit-box-orient: vertical子要素を縦方向に配置
-webkit-line-clamp表示する最大行数を指定
overflow: hidden指定行数を超えたコンテンツを非表示

基本的な使用例

シンプルな3行制限

<p class="text-clamp-3">
  これは長いテキストの例です。line-clampプロパティを使用することで、
  指定した行数を超えるテキストは自動的に省略され、末尾に「...」が
  表示されます。ユーザーに長いテキストであることを視覚的に示すことができます。
</p>
.text-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.6;
}

行数を変えた複数のパターン

/* 1行制限 - タイトルや見出し向け */
.clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* 2行制限 - サブタイトルや短い説明向け */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 3行制限 - 概要説明向け */
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 5行制限 - 詳細説明向け */
.clamp-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

実践的な活用パターン

ブログカードコンポーネント

<article class="blog-card">
  <img src="thumbnail.jpg" alt="記事のサムネイル" class="blog-card__image">
  <div class="blog-card__content">
    <h2 class="blog-card__title">最新のCSS技術でレイアウトを作る方法</h2>
    <p class="blog-card__excerpt">
      この記事では、FlexboxやGridを活用した最新のレイアウト手法について解説します。
      レスポンシブデザインにも対応した実践的なサンプルコードを紹介し、
      モダンなWebサイト構築のテクニックを学びましょう。
    </p>
    <time class="blog-card__date">2024年9月27日</time>
  </div>
</article>
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  max-width: 320px;
}

.blog-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card__content {
  padding: 16px;
}

.blog-card__title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
  /* タイトルは2行まで */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog-card__excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px;
  /* 概要は3行まで */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.blog-card__date {
  font-size: 12px;
  color: #999;
}

商品リストカード

<div class="product-card">
  <img src="product.jpg" alt="商品画像" class="product-card__image">
  <div class="product-card__info">
    <h3 class="product-card__name">高機能ワイヤレスイヤホン Pro Max Edition</h3>
    <p class="product-card__description">
      最新のノイズキャンセリング技術を搭載し、最大30時間のバッテリー持続時間を実現。
      快適な装着感と高音質を両立した、プロフェッショナル向けのワイヤレスイヤホンです。
    </p>
    <span class="product-card__price">¥29,800</span>
  </div>
</div>
.product-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-width: 400px;
}

.product-card__image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.product-card__info {
  flex: 1;
  min-width: 0; /* flexアイテムの縮小を許可 */
}

.product-card__name {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-card__description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-card__price {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

レスポンシブ対応の行数制限

.responsive-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* デフォルト: 3行 */
  -webkit-line-clamp: 3;
}

/* タブレット: 4行 */
@media (min-width: 768px) {
  .responsive-clamp {
    -webkit-line-clamp: 4;
  }
}

/* デスクトップ: 5行 */
@media (min-width: 1024px) {
  .responsive-clamp {
    -webkit-line-clamp: 5;
  }
}

1行テキストの省略との違い

1行のみのテキスト省略には、line-clampを使わないシンプルな方法があります。

1行省略（従来の方法）

.single-line-ellipsis {
  white-space: nowrap;    /* 改行を禁止 */
  overflow: hidden;       /* はみ出し部分を隠す */
  text-overflow: ellipsis; /* 省略記号を表示 */
}

比較表

要件使用するプロパティ
1行で省略white-space + overflow + text-overflow
複数行で省略-webkit-line-clamp + 関連プロパティ

ホバーで全文表示

<div class="expandable-text">
  <p class="expandable-text__content">
    これは長いテキストの例です。通常は3行で省略されますが、
    ホバーすると全文が表示されます。ユーザーが詳細を確認したい場合に
    便利なパターンです。
  </p>
</div>
.expandable-text {
  position: relative;
}

.expandable-text__content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: all 0.3s ease;
  line-height: 1.6;
}

/* ホバー時に全文表示 */
.expandable-text:hover .expandable-text__content {
  -webkit-line-clamp: unset;
  overflow: visible;
}

JavaScript連携での「もっと見る」機能

<div class="read-more-container">
  <p class="read-more-text" id="expandableText">
    これは長いテキストの例です。「もっと見る」ボタンをクリックすると
    全文が表示されます。再度クリックすると折りたたまれます。
    ユーザーが自分のペースでコンテンツを閲覧できる便利な機能です。
  </p>
  <button class="read-more-button" id="toggleButton">もっと見る</button>
</div>
.read-more-container {
  max-width: 300px;
}

.read-more-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.read-more-text.expanded {
  -webkit-line-clamp: unset;
}

.read-more-button {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
}

.read-more-button:hover {
  text-decoration: underline;
}
const text = document.getElementById('expandableText');
const button = document.getElementById('toggleButton');

button.addEventListener('click', () => {
  text.classList.toggle('expanded');
  button.textContent = text.classList.contains('expanded')
    ? '折りたたむ'
    : 'もっと見る';
});

注意点とベストプラクティス

1. 必須プロパティを忘れずに

-webkit-line-clamp単体では動作しません。必ず以下のプロパティをセットで指定してください。

/* NG: line-clampだけでは動作しない */
.broken {
  -webkit-line-clamp: 3;
}

/* OK: 必要なプロパティをすべて指定 */
.working {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

2. Flexコンテナ内での使用

Flexアイテム内で使用する場合、min-width: 0を設定しないと正しく動作しない場合があります。

.flex-container {
  display: flex;
  gap: 16px;
}

.flex-item {
  flex: 1;
  min-width: 0; /* 重要: これがないと省略されない場合がある */
}

.flex-item__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

3. line-heightとの関係

line-heightを適切に設定することで、見た目がより美しくなります。

.well-styled-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.6; /* 適切な行間を設定 */
  max-height: calc(1.6em * 3); /* フォールバック用の高さ制限 */
}

ブラウザサポート

ブラウザサポート状況
Chrome全バージョン（プレフィックス付き）
Firefox68以降（プレフィックス付き）
Safari全バージョン（プレフィックス付き）
Edge全バージョン（プレフィックス付き）
Opera全バージョン（プレフィックス付き）

すべてのモダンブラウザで-webkit-プレフィックス付きでサポートされています。

まとめ

line-clampプロパティは、テキストの行数制限において非常に便利な機能です。

主なポイント:

  • 必須プロパティ（display: -webkit-box、-webkit-box-orient、overflow: hidden）を忘れずに
  • ブログカード、商品リスト、ニュース一覧など幅広いUIで活用可能
  • レスポンシブ対応でデバイスごとに行数を変更できる
  • JavaScriptと組み合わせて「もっと見る」機能も実装可能
  • Flexアイテム内ではmin-width: 0を設定する

適切に活用することで、デザインの一貫性を保ちながら、ユーザーにとって読みやすいコンテンツを提供できます。

参考文献

円