【実務・中級編】text-overflow: ellipsisによる省略記号の表示 – HTML実践ガイド

「…」で泣かないために。text-overflow: ellipsisの深淵と、現場で生き残る実装パターン

フロントエンドの現場にいると、UIデザインから「このテキストエリア、はみ出したらいい感じに『…』で省略してくれない？」というリクエストが飛んでくることは日常茶飯事ですよね。

一見、CSSのプロパティを3つ当てるだけの簡単な作業に見えます。しかし、いざ実装してみると「あれ、なぜか省略されない」「インライン要素で効かないんだけど！」と頭を抱えた経験、一度はあるはずです。

今日は、そんな`text-overflow: ellipsis`の「なぜ効かないのか」という裏側のロジックと、中級エンジニアなら押さえておきたい「現場レベルの鉄板実装」を共有します。

—

なぜ `text-overflow` は無視されるのか？

まず、CSSの仕様を再確認しましょう。`text-overflow: ellipsis` がブラウザによって正しく解釈されるためには、以下の「3つの聖域」が守られている必要があります。

1. `overflow: hidden;` が指定されていること（溢れるものを隠す）
2. `white-space: nowrap;` が指定されていること（改行を許さない）
3. `display` プロパティがブロック、またはブロック相当であること

多くのエンジニアがハマるのは3番目です。`` や `` などのインライン要素にそのまま適用しても、ブラウザは「お前は幅を持っていないから、省略する対象（溢れる境界線）を計算できないよ」と判断して無視します。

ブラウザのレンダリングエンジンは、要素の幅（`width`）とコンテキストを厳密に計算しています。インライン要素に対して `overflow` を指定しても無効化されるのは、それが仕様だからです。ここを突破するには、要素をブロック化するか、`inline-block` にして幅を制限してあげる必要があります。

—

現場で使える「鉄板」実装コード

それでは、実務でそのまま使えるクリーンな実装パターンを紹介します。モダンな開発環境なら、以下のようなクラス設計にしておくと保守性が格段に上がります。

1. 単一行のテキスト省略（基本形）

最もスタンダードなパターンです。`` タグや `` タグでナビゲーションメニューを作る際によく使います。

.text-ellipsis {
/ インライン要素をブロック化し、幅を確保する /
display: inline-block;
/ 親要素の幅を超えないようにする /
max-width: 100%;
/ 必須：改行を禁止し、溢れた分を隠す /
white-space: nowrap;
overflow: hidden;
/ 必須：ここで「…」を表示させる /
text-overflow: ellipsis;

/ 縦方向の微調整（インラインブロック特有の浮き上がり対策） /
vertical-align: bottom;
}

2. 複数行の省略（モダンなアプローチ）

「2行目以降を省略したい」というリクエストは、以前はJavaScriptで文字数をカウントして切り詰めるという泥臭い方法をとっていましたが、今は `-webkit-line-clamp` が標準です。ベンダープレフィックスがついているとはいえ、今や主要ブラウザのすべてでサポートされている実用的な仕様です。

.text-clamp-2 {
/ 複数行省略の要：Webkit系エンジン向けの指定 /
display: -webkit-box;
-webkit-box-orient: vertical;
/ 何行で省略するか /
-webkit-line-clamp: 2;
/ 溢れた分を隠す /
overflow: hidden;
}

—

現場のシニアからのアドバイス：気をつけるべき「罠」

コードを書くときに、もう一つだけ頭の片隅に置いておいてほしいことがあります。それは「アクセシビリティ」です。

`text-overflow: ellipsis` で隠されたテキストは、視覚的には「…」で省略されていますが、DOM上にはフルテキストが存在します。画面読み上げソフト（スクリーンリーダー）は、この「…」を無視して全文を読み上げることがほとんどです。これは非常に素晴らしい挙動ですが、「UI上で省略していることをユーザーが認識できるか」という点はデザイン側と握っておくべきです。

もし重要な情報（例えば、長いファイル名やユーザー名）であれば、マウスホバー時に `title` 属性で全文を表示させるか、ツールチップを出すのが「優しい」実装というものです。

まとめ

`text-overflow` を効かせるには `overflow: hidden` と `white-space: nowrap` が必須。
インライン要素なら `display: inline-block` で幅を持たせることを忘れない。
複数行なら `-webkit-line-clamp` でスマートに解決する。

フロントエンドの技術は魔法ではありません。ブラウザがどうレンダリングしようとしているのか、その「論理」を理解すれば、どんなレイアウト崩れも怖くなくなります。

明日からのコーディングで、ぜひこのパターンをテンプレートとして活用してみてください。また、何かハマりどころがあったら、いつでもチームで議論しましょう。健闘を祈ります！