インライン要素で「…」を表示させる、あの泥臭い戦いについて
フロントエンドの現場で「このテキスト、枠からはみ出したら『…』で省略しておいて」というUI要件は、もはや挨拶代わりと言っていいほど頻出します。
ブロックレベル要素であれば `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;` を当てるだけで事足りる。これは誰もが知っている定石です。しかし、「インライン要素」に対して同じことをやろうとして、何度画面の前で頭を抱えたことでしょうか？
今回は、インライン要素における「省略記号」の不可解な挙動の正体と、実務で使える「一発で決める」実装パターンを紐解いていきます。
—
なぜインライン要素は「text-overflow」を拒絶するのか
まず、仕様の核心に触れましょう。`text-overflow` プロパティが有効に機能するための大前提は、対象の要素が「ブロックコンテナ（Block Container）」であることです。
インライン要素（`span`, `a`, `strong` など）は、CSSの仕様上、コンテンツのサイズに応じて動的に変化する性質を持っています。そのため、ブラウザのレンダリングエンジンは「どこでテキストを切り詰めていいか」の計算式を確定できないのです。
ブラウザの裏側では、以下のような処理が働いています：
1. 幅の計算: インライン要素は `width` プロパティを無視するため、親要素の幅を制約として受け取れない。
2. オーバーフローの判定: 「溢れている」という状態を定義するための境界ボックス（Bounding Box）が、インライン要素では曖昧になる。
つまり、インライン要素に省略記号を効かせるための唯一の解は、「インライン要素をブロックコンテナとして振る舞わせる」という矛盾を解消するハックが必要になるわけです。
—
実践：インライン要素を「省略可能」にするスマートな手法
現場で最も安全で、かつ保守性の高いアプローチは、`display: inline-block` を活用しつつ、親要素で制御する方法です。無理やりインライン要素をいじり倒すのではなく、「インラインの軽やかさとブロックの制御能力」のいいとこ取りをしましょう。
以下に、実務でそのまま使えるスニペットを用意しました。
/ インライン要素を省略可能にするためのコンテナスタイル /
.text-ellipsis-wrapper {
display: inline-block;
max-width: 100%; / 親要素の幅を超えないよう制限 /
vertical-align: bottom; / インライン要素特有のベースラインずれを抑制 /
/ 以下が省略の三種の神器 /
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
使用例：リンクテキストに適用する場合
—
シニアからのTips：ここだけは気をつけてほしいこと
この実装をする際、中級エンジニアが陥りがちな罠が2つあります。
1. `vertical-align` の見落とし
`inline-block` にした瞬間、要素の下にわずかな隙間（行間）が生まれます。`vertical-align: bottom` や `middle` を適切に設定しないと、デザインカンプと数ピクセルのズレが生じ、デザイナーから鋭いツッコミを受けることになります。細かいようですが、こういう「ミリ単位の意識」がプロの品質を分けます。
2. 親要素の `flex` コンテキスト
もし親要素が `display: flex` で制御されている場合、省略記号が効かないケースがあります。これはフレックスアイテムのデフォルト値である `min-width: auto` が悪さをしているためです。この場合は、省略したい要素に対して `min-width: 0;` を明示的に指定してください。これで「なぜか省略されない…」という地獄のデバッグから解放されます。
—
まとめ
インライン要素の省略は、単なるCSSプロパティの指定ではなく、「ブラウザにどう計算させるか」というレンダリングの理解が問われる技術です。
「とりあえず動いた」ではなく、「なぜこのプロパティが必要なのか」を理解して実装すれば、予期せぬレイアウト崩れにも即座に対応できるようになります。現場で困ったときは、まずは `display: inline-block` への変換と `max-width` の設定、そして `flex` コンテキストの確認。この3ステップを思い出してください。
フロントエンドの仕事は、こうした地味な積み重ねの先にこそ、美しいUXが宿ります。さあ、自信を持ってコードを書いていきましょう。
コメント