CSSでテキストを省略する方法

CSSでテキストを省略するには、1行をクリップする場合はtext-overflow: ellipsisを、固定行数でクリップする場合はline-clampを使用します。この1つの違いが、それ以降のすべての判断を左右します。

カードのタイトルがコンテナをはみ出してしまい、text-overflow: ellipsisがまったく機能しないという経験をしたことがあれば、その苛立ちはよくわかるでしょう。この失敗のほとんどは、2つのいずれかに起因しています。省略したい行数に対して誤ったテクニックを使っているか、flexの親要素が暗黙的に縮小を拒否しているかです。1行の省略には3つの宣言を組み合わせる必要があり、複数行の省略には-webkit-boxの3点セットが必要です。実際の本番環境で問題になる箇所は限られています。flexbox内でellipsisが暗黙的に失敗する、テキストが折り返せない場合に複数行クランプが失敗する、JavaScriptによる省略がスクリーンリーダーに必要なコンテンツを静かに破壊する、といったケースです。本記事では、各動作パターンとそれに付随する落とし穴を順を追って解説します。

判断基準を表形式でまとめると以下のとおりです。

1行のテキストを省略するには？

1行のテキストを省略するには、3つの宣言を組み合わせる必要があります。white-space: nowrapでテキストの折り返しを防ぎ、overflow: hiddenではみ出しをクリップし、text-overflow: ellipsisで…を追加します。3つのうちどれか1つでも欠けると効果が失われます。text-overflowだけでは折り返されたテキストに何も作用せず、overflow: hiddenがなければellipsisが配置されるクリッピングボックスが存在しません。

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

要素には幅を制約する設定も必要です。コンテナが文字列全体を1行に収めるほど広い場合、オーバーフローは発生せずellipsisも表示されません。省略を強制するのは親要素の幅です。1行に収めなければならないカード、テーブルセル、ナビゲーション項目、見出しなどに適用してください。

text-overflowプロパティは、clip（デフォルトのハードカット）、ellipsis、カスタム<string>を受け付けます。また、CSS Overflow Level 4の標準に追加され、MDNの正式な構文にも記載されているfadeキーワードとfade()関数もありますが、実質的にどのブラウザも実装していないため、本番環境では使用しないでください。

複数行のテキストを省略するには？

複数行の省略には、display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N、overflow: hiddenを設定します。ベンダープレフィックスが付いていますが、この組み合わせは主要なすべてのブラウザでサポートされており、現在の本番環境で安全に使用できるアプローチです。

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

overflow: hiddenは必ず維持してください。MDNが指摘するように、これがないとテキストは実際にはクリップされませんが、指定した行数の後にellipsisが表示されるため、ellipsisとはみ出したテキストの両方が下に表示されてしまいます。これらのプレフィックス付きプロパティは相互依存しています。-webkit-line-clampは、displayが-webkit-box（または-webkit-inline-box）で、かつ-webkit-box-orientがverticalの場合にのみ機能します。プレフィックス付きプロパティは正式には非推奨ですが、この3つの依存関係自体が仕様として定められた動作であり、ブラウザは引き続きサポートするため、実際のリスクはありません。

注意すべき失敗パターンとして、複数行クランプはテキストの折り返しが許可されている場合にのみ機能します。継承されたwhite-space: nowrapがあると、すべてが1行に折りたたまれて静かに壊れてしまいます。white-spaceはnormalまたはpre-wrapに設定してください。

また、CSS Overflow Module Level 4で定義されたプレフィックスなしの標準line-clampプロパティもあり、ブロックのコンテンツを指定した行数に制限します。ただし、2026年時点では一部の広く使用されているブラウザがまだサポートしていないため、Baselineに達していないとマークされています。プログレッシブエンハンスメントとして扱い、プレフィックス付き宣言の代替としてではなく、並列して追加してください。

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* 標準化済み。置き換えではなく並列して追加 */
  overflow: hidden;
}

flexbox（およびgrid）内でellipsisが失敗する理由

ellipsisはflex子要素で暗黙的に失敗します。flex itemのデフォルトmin-width: autoがコンテンツ幅以下への縮小を拒否するため、要素がオーバーフローするほど狭くなることがなく、text-overflowがクリップするものがなくなります。その結果、子要素は省略されずにコンテナをはみ出してしまいます。修正は子要素への1つの宣言だけです。

.card { display: flex; }

.card__label {
  min-width: 0; /* autoの最小値を上書きし、itemが縮小できるようにする */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

min-width: autoの自動最小サイズ設定はgrid itemにも適用されるため、CSS Gridトラック内での省略も同じ理由で失敗します。修正方法も同じで、子要素にmin-width: 0を設定します（またはoverflow: hiddenでも自動最小値を解除できます）。これは実際の現場で最もよく見られる省略のバグです。CSSは単独では正しく見えるのに、要素がflexまたはgridの子要素になった途端に壊れてしまいます。

Tailwindでの同等の記述

Tailwindはプラグイン不要で両方のパターンをユーティリティとして提供しています。truncateユーティリティは、overflow: hidden、text-overflow: ellipsis、white-space: nowrapを設定する複合クラスで、1行の省略レシピを1つのクラスで実現します。複数行の場合は、line-clamp-<n>（例：line-clamp-3、または無効化する場合はline-clamp-none）が-webkit-boxの3点セットを出力します。line-clampユーティリティはTailwind v3.3からコアに組み込まれており、現在の安定版はv4.3.3（2026年7月）のため、追加のインストールは不要です。

<p class="truncate">1行、ellipsisでクリップ…</p>
<p class="line-clamp-3">複数行、3行にクランプ…</p>

flexまたはgridの子要素内では、min-w-0を追加してください。これはmin-width: 0修正のユーティリティ版です。

アクセシビリティ：CSSによる省略とJSによる省略

CSSの省略は純粋に表示上のものであるため、完全な文字列はDOMに残り、スクリーンリーダーはaria-labelなしで全文を読み上げます。これがJavaScriptによる省略との決定的な違いです。text.substring(0, 50)のようなアプローチはDOMノードを書き換えるため、titleやaria-label属性で別途保持しない限り、クリップされたテキストは支援技術を含むすべてのユーザーにとって失われてしまいます。

CSSを使用しても、省略によって情報が視覚的に隠れることに変わりはありません。本番UIのセッションリプレイでは、ユーザーが必要な情報が隠れたテーブルセルやナビゲーション項目にカーソルを合わせたり目を細めたりしているケースが定期的に見られます。情報を持つコンテンツに省略を適用する場合は、title属性または展開するための操作手段と組み合わせてください。

<span class="truncate" title="Quarterly revenue report — EMEA region, Q3 2026">
  Quarterly revenue report — EMEA region, Q3 2026
</span>

1つ知っておくべき制限があります。-webkit-line-clampのellipsisはカスタマイズできず、text-overflowはインラインのオーバーフローにのみ作用するため、複数行テキストには適用されません。複数行テキストにカスタムの省略インジケーターが必要な場合は、クランプと戦うよりも別のパターンを検討するサインです。

1行が必要な場合はtext-overflow: ellipsisを、複数行が必要な場合はline-clampの3点セットを使用し、要素がflexまたはgridの内部にある場合はmin-width: 0を忘れず、隠れたテキストが意味を持つ場所にはtitleを追加してください。これで正しく機能するパターンと、暗黙的に失敗する3つのパターンをカバーできます。

よくある質問

text-overflow: ellipsisとline-clampの違いは何ですか？

1行をクリップする場合はtext-overflow: ellipsisを、固定行数でクリップする場合はline-clampを使用します。1行の省略にはwhite-space: nowrap、overflow: hidden、text-overflow: ellipsisの3つの宣言を組み合わせる必要があります。複数行のクランプには-webkit-boxの3点セットとoverflow: hiddenが必要で、text-overflowはインラインのオーバーフローにのみ作用するため、複数行には応答しません。

flexboxやgrid内でellipsisによる省略が機能しないのはなぜですか？

flexまたはgrid itemのデフォルトmin-width: autoがコンテンツ幅以下への縮小を拒否するため、要素がオーバーフローするほど狭くなることがなく、text-overflowがクリップするものがなくなります。その子要素にmin-width: 0を設定することで自動最小値が上書きされ、省略が復元されます。子要素にoverflow: hiddenを適用しても自動最小値が解除されます。これはCSSが単独では正しく見えるため、最もよく見られる実際の省略バグです。

2026年時点でプレフィックスなしのline-clampを単独で使用しても安全ですか？

いいえ。標準化されたプレフィックスなしのline-clampはCSS Overflow Module Level 4で定義されていますが、2026年時点でMDNはBaselineに達していないとマークしています。広く使用されているブラウザの一部でまだ動作しないためです。-webkit-box、-webkit-box-orient、-webkit-line-clampの宣言を置き換えるのではなく、プログレッシブエンハンスメントとして並列して追加してください。プレフィックス付きの3点セットが現在の本番環境で安全なアプローチです。

CSSによる省略はスクリーンリーダーのアクセシビリティに影響しますか？

いいえ。CSSの省略は純粋に表示上のものであるため、完全な文字列はDOMに残り、スクリーンリーダーはaria-labelなしで全文を読み上げます。問題はJavaScriptによる省略です。substringのアプローチはDOMノードを書き換えるため、titleやaria-labelで保持しない限り、クリップされたテキストは支援技術を含むすべてのユーザーにとって失われてしまいます。情報を持つコンテンツには、CSSによる省略であってもtitle属性または展開するための操作手段と組み合わせてください。