なぜか突き抜けていく「長い英単語」。CSSでスマートに制御する方法をマスターしよう！
Webサイトを作っていると、一度はこんな経験をしたことはありませんか？
「あれ、ここ、デザイン崩れてる……？」
よく見ると、`` や `` タグの中に書いたURLや、非常に長い英単語（例えば `supercalifragilisticexpialidocious` みたいに！）が、親要素の枠を突き破って画面の端まで伸びてしまっている。
せっかく綺麗に組んだレイアウトが、たった一つの長い単語に壊される。これ、初心者の方なら誰もが一度は通る「CSSの洗礼」なんです。大丈夫、焦る必要はありません。実はこれ、CSSの「改行のルール」をちょっと教えてあげるだけで、驚くほど素直に収まってくれるようになるんです。
今日は、そんな「はみ出し問題」を解決するヒーロー、`word-break` と `overflow-wrap` について、お話ししていきましょう。
—
なぜ文字は「突き抜ける」のか？
そもそも、なぜ日本語は勝手に折り返してくれるのに、英語やURLは突き抜けてしまうのでしょうか。
想像してみてください。日本語は「一文字ずつが独立した箱」のようなものなので、どこで切っても自然です。でも、英語などの単語は「スペースで区切られたひとつの塊」として扱われます。ブラウザは「単語を途中で切るのは失礼かな？」と気を遣って、行の終わりまで粘ってくれるわけです。
しかし、その「優しさ」が災いして、画面からはみ出してしまう。このブラウザの「律儀な性格」を、CSSで少しだけ調整してあげるのが今回のテクニックです。
—
1. `overflow-wrap: break-word;` （まずはここから！）
「基本的には単語を壊したくないけれど、どうしようもない時は折り返してね！」という、非常にバランスの良いプロパティがこれです。
以前は `word-wrap` と呼ばれていましたが、今は `overflow-wrap` が推奨されています。
.text-container {
/ 親要素の幅を超えそうなときだけ、単語の途中で改行する /
overflow-wrap: break-word;
}
こんな時におすすめ：
ユーザーが入力した長いテキストや、ブログのタイトルなど、「基本は守りつつ、緊急事態には逃げ道を作る」ようなケースに最適です。迷ったらまずはこれを試してみてください。
—
2. `word-break: break-all;` （強制突破の術）
次に紹介するのは、少し強引な手段です。`word-break: break-all;` を使うと、ブラウザは「単語の区切り？ そんなの知ったこっちゃない！」とばかりに、文字が親要素の端に触れた瞬間に容赦なく改行します。
.sidebar-link {
/ どんな場所でも強制的に折り返す /
word-break: break-all;
}
注意点：
これを使うと、例えば「apple」が「app-le」のように、英語としてはかなり不自然な場所で切れてしまうことがあります。文章がメインの場所で使うと少し読みづらくなるので、「サイドバーの細い枠の中にあるURL」や「表（テーブル）の狭いセル」など、デザイン優先で「絶対に突き抜けてほしくない！」という場所に限定して使うのがコツですよ。
—
実践コード：こう使い分けよう！
実際に、コードを書いて試してみましょう。コピーして、ご自身のエディタで動かしてみてください。
https://very-long-url-example.com/category/article/detail/
Supercalifragilisticexpialidocious
—
まとめ：怖がらなくて大丈夫！
最初は「CSSってなんでこんなに言うことを聞いてくれないの？」とイライラすることもあるかもしれません。でも、今回紹介した2つのプロパティを覚えておけば、もうレイアウト崩れに怯えることはありません。
1. 基本は `overflow-wrap: break-word;` で優しく守る。
2. どうしても狭い場所で困ったら `word-break: break-all;` で強制的に収める。
この二段構えで、あなたのWebサイトはグッと洗練されたものになるはずです。
小さな一歩ですが、こうした「細部へのこだわり」が、一流のフロントエンドエンジニアへの第一歩です。ぜひ、今日から使い分けてみてくださいね！
もし分からないことがあれば、いつでもまた聞きに来てください。一緒に一つずつ解決していきましょう！
コメント