テキストオーバーフローとラインクランプ
問題
カード、リスト項目、ナビゲーションなど、制約のあるUI領域にテキストを収めるために切り詰めるのはよくある要件です。AIエージェントはJavaScriptベースの解決策に頼ったり、1行の切り詰めしか処理できない不完全なCSSを生成したりしがちです。特に複数行のクランプは、正確なプロパティの組み合わせが必要で、間違えやすいものです。レガシーの-webkit-line-clampアプローチには相互依存する3つの必須プロパティがあり、いずれか1つでも省略するとサイレントに失敗します。
解決方法
CSSには2つの主要な切り詰めパターンがあります：text-overflowを使った1行の省略記号と、-webkit-line-clampを使った複数行クランプ（標準のline-clampプロパティもより広く採用されつつあります）です。
コード例
1行の省略記号
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
3つのプロパティすべてが必須です：
white-space: nowrapは行の折り返しを防ぐoverflow: hiddenはあふれたコンテンツをクリップするtext-overflow: ellipsisは...インジケーターを表示する
<p class="truncate">
This is a very long text that will be truncated with an ellipsis at the end
</p>
複数行クランプ（レガシー構文）
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
このパターンが動作するには4つのプロパティすべてが必須です。-webkit-プレフィックスが付いていますが、すべての主要ブラウザ（Chrome、Firefox、Safari、Edge）でサポートされており、完全に仕様化された動作です。
<div class="card">
<h3>Card Title</h3>
<p class="line-clamp-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.
</p>
</div>
テキストオーバーフロー — 1行の省略記号と複数行クランプ
モダンなline-clampプロパティ
標準のline-clampプロパティは構文を簡素化します。2025年時点では、Chromiumベースのブラウザがこれをサポートしています。
.line-clamp-modern {
line-clamp: 3;
overflow: hidden;
}
クロスブラウザ対応パターン
最大限の互換性のために、両方のアプローチを組み合わせましょう：
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 3;
}
実用的なカードコンポーネント
.card {
max-width: 320px;
padding: 1rem;
}
.card__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card__description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
<article class="card">
<h3 class="card__title">A very long card title that might overflow</h3>
<p class="card__description">
Card description text that can span multiple lines but will be clamped to
exactly three lines with an ellipsis at the end of the third line.
</p>
</article>
展開可能なクランプテキスト
.expandable {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.expandable.is-expanded {
-webkit-line-clamp: unset;
}
クランプテキストのアクセシビリティ対応
<p class="line-clamp-3" title="Full text content goes here for tooltip access">
Truncated visible content...
</p>
AIがよくやるミス
- 1行切り詰めに必要な3つのプロパティのうち1つを忘れる —
white-space、overflow、text-overflowのすべてを設定する必要がある - 複数行クランプで
display: -webkit-boxや-webkit-box-orient: verticalを忘れ、クランプがサイレントに失敗する - CSSの代わりにJavaScriptで文字数によるテキスト切り詰めを行う。これはフォントサイズや画面幅が異なると正しく動作しない
- コンテナに幅の制約を設定しない —
text-overflow: ellipsisは要素に制限された幅（明示的またはflex/gridの親からの暗黙的な幅）が必要 text-overflow: ellipsisなしでoverflow: hiddenを使い、視覚的なインジケーターなしにテキストが文字の途中でクリップされる-webkit-line-clampをインライン要素に適用する —-webkit-boxディスプレイモデルのブロックレベルボックスが必要- クランプされたテキストがスクリーンリーダーからコンテンツを隠すことを考慮しない — フルテキストはDOMに残っているが、視覚のみのユーザーはどれだけ隠されているかのコンテキストを失う
使い分け
1行の切り詰め
- 動的なラベルを持つナビゲーション項目
- 可変幅のコンテンツを含むテーブルセル
- 幅が制約されたタグやバッジ
- パンくずリンク
複数行クランプ
- グリッドレイアウトのカード説明文
- ソーシャルインターフェースのコメントプレビュー
- 一覧ページの商品説明
- 記事の抜粋やティーザー
切り詰めるべきでない場合
- ユーザーが全文を読む必要がある主要コンテンツ
- エラーメッセージやバリデーションテキスト
- アクセシビリティ上重要なラベルや説明
- 切り詰めた部分によって意味が変わるコンテンツ（例: 価格、日付）
Tailwind CSS
Tailwindは1行の省略記号にtruncate、複数行クランプにline-clamp-*ユーティリティを提供しています。
Tailwind: truncateとline-clamp