こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。
Web制作を始めたばかりの頃、誰もが一度は「あれ、なんでこの長い英単語やURL、枠からはみ出しちゃうの？」という壁にぶつかりますよね。まるで、パンパンに詰め込んだカバンから、はみ出た荷物が落ちそうになっているようなあの状態。
今日は、そんな「文字の折り返し問題」を解決する魔法のCSSプロパティ、`word-break`と`overflow-wrap`について、現場の知見を交えて優しく解説します。
—
なぜ文字は「はみ出す」のか？
ブラウザのデフォルト設定では、英単語は「単語の区切り（スペース）」がないと、ひとつの大きな塊として扱われます。例えば、めちゃくちゃ長いURLや、`Supercalifragilisticexpialidocious`のような単語は、ブラウザにとって「どこで切っていいか分からない、ひと繋がりの長い棒」なんです。
だから、親要素（枠）が小さくても、「いや、ここが僕の場所だから！」と強引に突き抜けてしまうんですね。このお行儀の悪い振る舞いを、CSSで優しく諭してあげましょう。
—
救世主その1：`overflow-wrap: break-word;`
「基本はこれだけでOK！」
まずは一番おすすめのプロパティから。`overflow-wrap`は、「どうしてもここから先は入らないよ！」という限界が来たときに、単語の途中であっても折り返してあげる優しい仕組みです。
現場の感覚で言うと：
「基本的には元の単語を崩したくない。でも、枠からはみ出すくらいなら、どこかで切って次の行に送ってくれ」という、「マナー重視の折り返し」です。
.text-container {
/ これが一番おすすめ！はみ出そうになったら折り返してね /
overflow-wrap: break-word;
/ 昔のブラウザ対応（念のため入れておくと安心） /
word-wrap: break-word;
}
—
救世主その2：`word-break: break-all;`
「強引にでも詰め込む、体育会系スタイル」
次に紹介するのは `word-break: break-all;` です。こちらは少し性格が違います。
現場の感覚で言うと：
「単語がどこで終わろうが関係ない！とにかく枠の端っこに来たら、容赦なくパツンと切って次の行に放り込め！」という、「レイアウト死守系」のプロパティです。
.url-display {
/ どんなに長い英単語も、枠の端で容赦なく折り返す /
word-break: break-all;
}
注意点としては、英語の文章でこれをやると、単語の途中で無慈悲に切られてしまうので、読みやすさが少し落ちることがあります。URLのような「意味のある単語が繋がっているわけではないもの」に使うのが賢い使い方ですね。
—
使い分けのコツ：どっちを使えばいいの？
迷ったときは、こう考えてみてください。
1. ブログの本文や、読みやすさを重視する文章
- → `overflow-wrap: break-word;` を使いましょう。「なるべく単語を壊さない」という配慮が、読者への優しさになります。
2. サイドバーのURL表示や、どうしても崩れたくないカードデザイン
- → `word-break: break-all;` を検討しましょう。見た目の整列を優先したい場面では、こちらの方が綺麗に収まることが多いです。
—
実践コード：まずは試してみよう！
以下のコードをコピーして、ご自身の環境で試してみてください。背景色をつけておくと、どれくらいはみ出していたかがよく分かりますよ！
Supercalifragilisticexpialidocious_Supercalifragilisticexpialidocious
—
最後に：つまずいても大丈夫！
最初は「どっちを使うのが正解なんだろう？」と悩むかもしれません。でも、Web制作に「絶対にこれじゃなきゃダメ」という唯一の答えはありません。
デザインの意図に合わせて、自分の手でCSSを書き換えて、「あ、こっちの方が綺麗だ！」という感覚を掴んでいくこと。それが一番の近道です。
もし表示がうまくいかなくても、「ブラウザが頑張って解釈している途中のちょっとした行き違い」だと思って、焦らずひとつずつプロパティを調整してみてくださいね。応援しています！
コメント