長い英単語でレイアウトが崩れる！そんな時の「魔法の改行」テクニック：hyphensと仲間たち
Webサイトを作っていると、たまに「あれ？ なんでここだけレイアウトが突き抜けてるの？」と頭を抱える瞬間、ありますよね。特に、英語の長い単語（`supercalifragilisticexpialidocious`みたいなやつですね！）が、狭い枠の中に無理やり押し込まれて、デザインを破壊していく……。
あれ、本当に胃が痛くなりますよね。でも、大丈夫です！ CSSには、そんな暴れん坊な単語をスマートに折り返すための「魔法のツール」がいくつか用意されています。
今日は、インライン要素（`span`や`a`タグなど）の中で、単語がどう振る舞うかをコントロールするコツを、一緒に紐解いていきましょう。
—
1. なぜ「長い単語」は改行されないの？
そもそも、なぜ英語の長い単語は、CSSで何も設定しないと枠からはみ出してしまうのでしょうか。
例えるなら、これは「頑固な一本の棒」を狭い箱に入れようとしている状態です。日本語は一文字ずつが独立しているので、どこで切っても自然ですが、英語は「ひとまとまりの単語」として扱われるため、ブラウザは「ああ、この単語は途中で切っちゃいけないんだな」と気を利かせて、枠を無視して表示してしまうんです。
この「頑固さ」をほどくのが、今日紹介するCSSプロパティたちです。
—
2. 頼れる3人の相棒：overflow-wrap, word-break, hyphens
この問題を解決する際、よく使われる3つのプロパティがあります。それぞれの役割を、身近な例えで見てみましょう。
overflow-wrap: break-word（「困った時の最終手段」）
「どうしても入らないなら、単語の途中で切ってもいいから枠内に収めて！」という指示です。一番素直で、レイアウトが崩れにくいのがこれです。
word-break: break-all（「強制的にぶった切る」）
「単語とか関係ない！とにかく枠の端まで来たら容赦なく次の行へ！」というかなり強気な設定です。日本語の文章には向いていますが、英語で使うと少し乱暴に見えることがあります。
hyphens: auto（「スマートにハイフンをつける」）
これが今回の主役です。単語を途中で切る際に、「-（ハイフン）」を付けて「ここ、繋がってますよ」と教えてくれる、とても上品なやり方です。
—
3. 実践！hyphensを使ってみよう
`hyphens: auto`を使うには、HTML側で「この文章は英語ですよ」と教えてあげる必要があります。これが意外と忘れがちなポイントです。
The supercalifragilisticexpialidocious
is a very long word.
.long-word {
/ 1. まずはハイフンを有効にする /
-webkit-hyphens: auto; / Safari用 /
-ms-hyphens: auto; / IE用 /
hyphens: auto; / これが本命 /
/ 2. もしハイフンが効かない時のバックアップ /
overflow-wrap: break-word;
}
なぜ `lang=”en”` が必要なの？
ブラウザは、「どこで単語を区切るのが正しいか」を言語ごとの辞書データで判断しています。`lang=”en”` と書くことで、ブラウザは「ああ、英語の辞書を使ってハイフンを入れる場所を探せばいいんだな」と理解してくれます。
—
4. 優先順位で迷わないためのヒント
「結局どれを使えばいいの？」と迷ったら、まずは以下の組み合わせを試してみてください。
1. 基本は `overflow-wrap: break-word`：これでほとんどの崩れは防げます。
2. デザインにこだわりたいなら `hyphens: auto`：書籍のような美しい改行を目指すならこちら。
3. `word-break`は最後の切り札に：本当にどうしようもない時の最終手段として取っておきましょう。
これらは共存できるので、`overflow-wrap`で安全を確保しつつ、`hyphens`で美しさを足す、という二段構えがプロの現場での定石です。
—
最後に：完璧じゃなくても大丈夫
Web制作を始めたばかりの頃は、テキストが少しズレるだけでも「あぁ、失敗した！」と焦ってしまうかもしれません。でも、大丈夫。CSSのプロパティは「魔法」ではありますが、すべての環境で100点満点の表示をさせるのは、世界中のエンジニアにとっても永遠の課題です。
まずは「こういうプロパティがあるんだ」と知っておくだけで、次に崩れが発生したとき、「あ、あの時の！」と思い出せるはずです。
少しずつ、自分の思い通りに文字が流れるようになる感覚を楽しんでみてくださいね。応援しています！
コメント