長い英単語の「不格好な突き抜け」を制御する：`hyphens` と改行ルールの深淵
フロントエンドの現場で、デザインレビューのたびに「この長い単語、どうにかならない？」と指摘を受けた経験はないだろうか。特に英語圏の単語や、エンジニアがよく扱う長めのURL、あるいは特殊な識別子などがインライン要素の中に鎮座していると、CSSの制御次第でレイアウトが崩壊する。
今回は、単なる「改行」の話ではない。ブラウザのレンダリングエンジンがどうやって「切るべき場所」を判断しているのか、その裏側にある優先順位と、実務で必須となる `hyphens` プロパティの正しい使い方を紐解いていく。
—
なぜ `hyphens` は期待通りに動かないのか
`hyphens: auto;` を指定したのにハイフンが入らない――これ、誰もが一度は通る道だ。ブラウザが「ここでハイフンを入れていい」と判断するには、主に2つの条件が必要になる。
1. 言語指定 (`lang` 属性) が必須: ブラウザは言語辞書を参照してハイフンの位置を特定する。HTMLで `` などが指定されていない場合、ブラウザは「どこで切ればいいか」がわからず、`auto` は無効化される。
2. 要素の制約: `hyphens` はあくまで「ハイフネーション（語尾のハイフン挿入）」を許可するフラグに過ぎない。要素が親要素を突き抜けるか、改行するかは、他のプロパティとの兼ね合いで決まる。
—
優先順位のリアル：`word-break` vs `overflow-wrap`
現場で混乱を招くのが、これらのプロパティの優先順位だ。まずは以下の図式を頭に入れておいてほしい。
- `word-break: break-all;`: 最強の破壊者。単語の途中だろうが容赦なく折り返す。ただし、文脈を無視するため、単語の途中で切れても構わない「非言語的」なデータには適しているが、文章には向かない。
- `overflow-wrap: break-word;`: 紳士的。単語を維持できるなら維持し、どうしても収まらない場合のみ、単語の途中で折り返す。
- `hyphens: auto;`: 学究的。辞書に基づき、適切な位置にハイフンを入れて折り返す。
実務における優先順位の考え方:
基本的には `overflow-wrap: break-word;` をベースにし、必要に応じて `hyphens: auto;` を加える。`word-break: break-all;` は、「どうしてもこのコンテナ幅から1ピクセルもはみ出してはならない」という緊急事態以外では避けるのが吉だ。
—
実践：コピペで使える「美しく折り返す」ベストプラクティス
以下は、インライン要素（`span` や `code` など）の中で、単語を極力綺麗に処理するためのスタイル定義だ。
.text-box {
/ 1. 言語指定がないとハイフネーションは動かないので、
必要に応じて個別の要素に lang=”en” を当てること /
/ 2. 基本の折り返し戦略 /
overflow-wrap: break-word; / 単語の途中で切れるのを最小限にする /
/ 3. ハイフネーションの有効化 /
hyphens: auto;
-webkit-hyphens: auto; / Safari対策：必須 /
/ 4. word-breakは最終手段 /
/ word-break: break-all; / これを安易に使うと英文の可読性が死ぬ /
}
/ codeや固定幅フォントの場合のTips /
code {
/ code要素内の長い文字列は折り返さないのがデフォルトだが、
強制的に折り返させるには以下を追加する /
word-break: break-word;
}
—
ブラウザの裏側を少しだけ覗く
ブラウザがテキストをレンダリングする際、まず「どこで改行可能か（Soft Wrap Opportunities）」を計算する。`hyphens: auto` を指定すると、ブラウザはレイアウト計算のプロセスで「その単語の辞書的な分割位置」をインラインの候補として追加する。
面白いのは、`hyphens` が効くかどうかは、その単語の「長さ」と「コンテナの余白」の兼ね合いで決定されるという点だ。コンテナに余裕があるなら、ブラウザはあえて単語を分割しない。これは「読みやすさ」を損なわないためのブラウザ側の親切心だ。
もし「どんなに短くてもハイフンを入れてくれ」という特殊な要件がある場合は、CSSだけで解決しようとせず、`` (Soft Hyphen) を文字列に埋め込むのが確実だ。
最後に：シニアからのアドバイス
「CSSで完璧に制御できる」と過信しないこと。英語のハイフネーションはあくまで視覚的な補助であり、特に日本語が混在する環境では、ブラウザごとのハイフン辞書の精度の差が顕著に出る。
もし、UIの崩れが許されないクリティカルな箇所（例えば、ボタン内のテキストや、非常に狭いサイドバーなど）であれば、CSSだけでなく、「その単語自体を省略する（`text-overflow: ellipsis;`）」というUX上の逃げ道を用意しておくのが、百戦錬磨のエンジニアの流儀だ。
技術は「どう動かすか」を知るだけでなく、「どこで諦めるか」を知ることが、結果的に最も美しいUIへの近道になる。ぜひ、プロジェクトに適用してその挙動を確かめてみてほしい。
コメント