現場で泣かないための `text-overflow`：インライン要素と「三点リーダー」の正しい付き合い方
フロントエンドの現場で、「ここ、文字数が増えたらいい感じに省略してくれない？」という仕様変更は、もはや挨拶代わりですよね。
カードUIのデザインカンプでは綺麗に収まっていたテキストが、API経由で取得した動的なデータによってレイアウトを破壊し、崩れた表示のままQAに回される……。そんな悲劇を何度も見てきました。今日は、CSSの `text-overflow: ellipsis` を使って、この問題をスマートに、かつ「なぜそうなるのか」という裏側のロジックを理解しながら解決する方法を共有します。
「インライン要素には効かない」という罠
まず大前提として、初心者が最初につまずくポイントを整理しましょう。`text-overflow: ellipsis` は、ブロックレベルの要素、あるいは `display: inline-block` 以上のブロック化された要素でなければ機能しません。
`` や `` タグといった純粋なインライン要素にこれを適用しようとして、首を傾げた経験はありませんか？ インライン要素のままでは「幅」を持てないため、ブラウザは「どこで溢れさせるか」を計算できないのです。
ブラウザが裏側で行っている「引き算」の計算
ブラウザが `text-overflow` を処理する際、裏側では以下の3つの条件が揃っているかを厳格にチェックしています。
1. 幅の制限: `width` や `max-width` が設定されていること。
2. 折り返しの禁止: `white-space: nowrap` で強制的に1行に収めていること。
3. 溢れた部分の隠蔽: `overflow: hidden` でコンテナ外をカットしていること。
この3つが揃って初めて、ブラウザの描画エンジンは「あ、これ以上は表示できないな。じゃあ最後の文字を削って『…』に置き換えよう」と判断します。つまり、これは単なる装飾ではなく、CSSレイアウトの「引き算の美学」なんですね。
実務でそのまま使える「鉄板」スニペット
では、現場で最も汎用性が高く、崩れにくい実装パターンを見ていきましょう。今回は、インライン要素（``）をブロック化して、安全に省略記号を出す構成にします。
.text-ellipsis {
/ 1. インライン要素を幅を持てるブロックに変更 /
display: inline-block;
/ 2. 親要素からはみ出さないよう最大幅を指定 /
max-width: 100%;
/ 3. 必須：強制的に1行に収める /
white-space: nowrap;
/ 4. 必須：はみ出した部分を隠す /
overflow: hidden;
/ 5. 必須：あふれた部分を「…」にする /
text-overflow: ellipsis;
/ 垂直方向のセンター揃えが崩れないよう調整 /
vertical-align: bottom;
}
さらに高みを目指す：複数行の省略（-webkit-line-clamp）
最近のモダンなUIでは「2行目以降は省略したい」という要望も多いはずです。その場合は、`text-overflow` の枠を超えて、以下のプロパティを組み合わせるのが現在の業界標準です。
.text-ellipsis-multiline {
display: -webkit-box;
-webkit-box-orient: vertical;
/ 何行で省略するかを指定 /
-webkit-line-clamp: 2;
overflow: hidden;
}
注意点として、`-webkit-line-clamp` は仕様としては草案段階（あるいは旧来の仕様）ですが、主要ブラウザすべてで安定して動作します。実務では「これを使っておけばまず間違いない」という信頼できる実装です。
最後に：シニアエンジニアからの助言
技術的に正しい実装をすることはもちろん重要ですが、現場で本当に大切なのは「コンテンツの文脈」です。
`text-overflow` で省略したテキストは、ユーザーから見れば「情報が欠落している」状態です。もし可能であれば、省略された要素に `title` 属性を付与してフルテキストが見えるようにしたり、ホバー時に全文を表示するアクセシビリティへの配慮を忘れないでください。
「動けばいい」コードを書くのは新人でもできます。しかし、「なぜ動くのか」を理解し、アクセシビリティという守りまで固められるのが、一流のエンジニアの仕事です。
明日からの実装で、ぜひこの「引き算の技術」を使いこなしてください。困ったことがあれば、またいつでも相談に乗りますよ。
コメント