テキストの折り返しの設定は overflow-wrap: anywhere; がオススメ！【CSS】

Web デザインで URL などがエリアや画面をぶち抜いたり、そのせいで伸びたり、また、意図しない改行が入ったり困ってませんか？

今回は、そんなテキストの折り返し、「ワードラップ」をコントロールする CSS ついてまとめてみました。

本記事では、
似たような英単語がたくさん出てきて脳みそが break するかもしれません！なるべく画像を使ったりしてわかりやすく解説するように心がけますが、あったかいものでも飲みながらながら、心穏やかにリラックスして、静かな環境で読んでいただけると一層理解が深まるかと思います！

柔軟に使える
overflow-wrap : anywhere ;

テキストを折り返す激推しプロパティは、

overflow-wrap: anyware;

です！
これさえ使っておけば、
だいたいOK！

完。

……。

セイセイセイ……

なぜOKなのか。

それを調べれば、調べるほど、
私の本体である、ツルツルな脳みそが break しました。

初めはoverflow-wrap: break-word;で完璧やな……！

そう、
思っていました。

でも、違ったのです……。

overflow-wrap プロパティって何？

overflow-wrap プロパティは、
ざっくり説明すると
ボックスから超長い“単語”がはみ出る場合に、テキストの折り返しをコントロールするプロパティです。※ここでいう“単語”というのは、半角文字（アルファベット、数字、記号など）が連続した文字列を指します。身近なものだと URL とかがイメージしやすいかもしれません。

値は３種類あります。

overflow-wrap: normal;
超長い“単語”は、
ボックスに収まらずそのままはみ出します。

overflow-wrap: break-word;
ボックス内に収まるように、超長い“単語”を無理やり折り返させます。ボックスの可変できる最大幅で折り返します。
以下、
『break-word』と書くことにします。

overflow-wrap: anywhere;
ボックス内に収まるように、超長い“単語”を無理やり折り返させます。ボックスの可変できる最小幅で折り返します。
以下、
『anywhere』と書くことにします。

『break-word』と『anywhere』の違いは……
とりあえず、
例をご覧ください。

『break-word』と『anywhere』に見た目に違いが生まれるポイントは、前述の通り、折り返しとなる基準がボックスの最大幅に影響を受けるか、最小幅に影響を受けるかというところです。この“幅”を設定するプロパティ（width や max-width など）が、本記事の主役 overflow-wrap プロパティと絡み合うことで無駄に複雑になり本件を難解にします。

互いに記述する場所が違ったり、記述したりしなかったりによって、思い通りにならないことがめちゃくちゃあります。。

先ほどのコードの具体例として、
最小幅を設定するのにwidth: min-content;を親要素のボックス（div）に設定しており、その子要素（p）内の長い単語を span 要素で囲ってoverflow: 〇〇;を設定しています。

ちなみにボックス自身にoverflow: normal;を設定しています。なぜなら、本ブログには body 要素で overflow-wrap プロパティを設定しており、“解説”するために一度リセットする必要があるからです。

中身をお見せするとこんな感じ。（記事用に style 属性でスタイルを設定しています。）

<!-- 『break-word』 の場合 -->
<div style="border:1px solid #000; overflow-wrap:normal; width:min-content; max-width:100%; background-color:#ffffcf;">
<p><strong>break-word</strong><br />min-contentを設定しているのだ！<br /><span style="overflow-wrap:break-word;">ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789</span></p>
</div>

『break-word』の場合、長い“単語”を限界まで（今回の場合はmax-width: 100%;まで）耐えてから折り返すイメージです。その耐えきった幅がまさに長い“単語”にとっての最大幅であり、「min-content」にとってはコンテンツの内在的な最小幅なのです。

ちょっと複雑ですね、、、、。
上の図で伝わるかな……。

<!-- 『anywhere』 の場合 -->
<div style="border:1px solid #000; overflow-wrap:normal; width:min-content; max-width:100%; background-color:#feeeee;">
<p><strong>anywhere</strong><br />min-contentを設定しているのだ！<br /><span style="overflow-wrap:anywhere;">ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789</span></p>
</div>

『anywhere』の場合は、「min-content」と長い“単語”の間で、親以上の先祖要素の中にある分割できない文字列を最小幅として扱い、それがコンテンツの内在的な最小幅になります。

こちらもなかなか複雑ですね、、、、。

これらのコードは、MDNのページで解説されているコードと見せたい意図自体はだいたい同じなのかなと僭越ながら思っています。

めっちゃ崩れる場合

ちょっといじわるして、
先述のコードをあえて、
『何も考えずに記述したらこうかな？』
という感じの
ずぼらな感じにしてみました。

<!-- 『break-word』 の場合 -->
<div style="border:1px solid #000; overflow-wrap:break-word; width:min-content; background-color:#ffffcf;">
<p><strong>『break-word』</strong><br />min-contentを設定しているのだ！<br />ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789</p>
</div>

<!-- 『anywhere』 の場合 -->
<div style="border:1px solid #000; overflow-wrap:anywhere; width:min-content; background-color:#feeeee;">
<p><strong>『anywhere』</strong><br />min-contentを設定しているのだ！<br />ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789ABCDEFGHIJEKLMOPQRSTUVWXYZ0123456789abcdefghijelmnopqrstuvwxyz0123456789</p>
</div>

width: min-content;とoverflow-wrap: 〇〇;をボックス（div）にまとめて記述して、max-width も span も削除しちゃいました！その都度つけるのはめんどっちぃので！

スッキリしたぜ！

一見、普通にいけそうな気がしますよね？！

でも、
悲惨なことになります！（なので、記事上には出力はしません、、、）

とくに『anywhere』の方がヤバめ！
width: min-content;の影響なのか、幅が１文字分になり、縦長になります。

『anywhere』のヤバさで見逃しがちですが、『break-word』の方も、max-width を設定していないせいで、折り返しされずにしれっとボックスの幅を崩してます。

致命的です。

その原因は、『break-word』と『anywhere』それぞれの特性による影響だと考えられます。

『break-word』は、
（自身か親に）幅を設定しないと機能しない。
つまり、max-width を外しちゃったせいで横を果てしなくぶち抜いてしまいました。

『anywhere』は、
overflow-wrap: anywhere;をwidth: min-content;が付いている要素自身、または親以上の先祖につけると崩れる。

ここの仕組みがちょっとわからないのですが、、、
私の無い脳みそで推測するに
width: min-content;は通常は分割できない文字列、「単語」レベルの幅まで縮小させる効果が、overflow-wrap: anywhere;と重なることで“分割できない”の基準が変化し、「単語」の幅以下に縮小されるようになってしまい、結果的にoverflow-wrap: anywhere;の影響でコンテンツの内在的な最小幅からはみ出した“テキスト”は折り返され、それがループして、バキバキに折られて１文字分まで縮小してしまうんじゃないかなぁと。。

とにかく難しいことはわからないけど、anywhere ＞ min-content は“化学反応”を起こしてヤベェことになるってことですかね！？

『break-word』と『anywhere』は、どっちを使うべき？

じゃあ、
『break-word』は『anywhere』どっちを使うんだいっ！て話ですが、
作っているページに合っている方を使うのが、結局よいのではないでしょうか。（どやっ！）

私なりに考える、『どういうときに使うべきか』をまとめてみました。

『break-word』
テキストの折り返しは細かく設定したい！
ブロックはそれぞれ、きっちり幅を固めてる！

『anywhere』
body に入れちゃってる！
結構可変する！
幅を決めてないボックスが結構ある！

「break-word」まめな人向き、「anywhere」はズボラな人向きって感じがしました！

たしかに、ズボラな私が作った本ブログも、overflow-wrap: anywhere;は手を差し伸べてくれました。body 要素にとりあえず入れて今のところ問題なく表示されている気がします。そもそも「min-content」なんてほぼ使ってないし、先述のようなトラブルが起きたら、その部分に合わせて修正する方が効率がいい気がしました。

どちらにせよ、迷ったらまず、
柔軟性のある
overflow-wrap: anywhere;
を入れてから考えてもいいと思います！！

似たようなスタイルあるよね？
それはどう違うの？

はい。

あなたは、今、
word-break プロパティのことを思い浮かべましたね（にやり。）

似たような名前、似たような効果、めっちゃ混乱しますよね……。

他にもテキストの折り返しをコントロールするプロパティがいくつか存在します。これらは互いに影響し合い、時にはよからぬ作用をもたらし、私たちの Web ページを破壊してくるでしょう……！！！なので、理解するのが難しくても、存在だけはしっかりと把握しておく必要があります！！

厄介なのが、プロパティの設定が競合した場合、どのプロパティが適用されるか、優先度があるということです。前項で登場した overflow-wrap プロパティを記述しても、なんだかうまく効かない場合は、他に優先度の高いプロパティが邪魔をしているかもしれません！！

以下に、優先度の高い順で紹介します。

テキストの表示や折り返しに直接影響するプロパティ

① white-space プロパティ

white-space は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。

MDN

すこし難しいので、詳細は割愛しますが、ざっくりとした説明だと、ホワイトスペース（タブ、改行、頁送り、復帰、空白の５つ。詳しくはMNDへ。）をまとめたり、折り返したりなどの挙動を設定するプロパティです。他のスタイルに優先して適用されるようです。

空白をそのまま表示したい場面、例えばコードスニペットや詩のレイアウトなど、特定のデザインに合わせて使われることが多いです。

初歩的な Web ページであればひとまずそっとしておいてもよいかと思います。

② word-break プロパティ

word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

MDN

グリッド内や固定幅のコンテンツで単語があふれてしまう場合、強制的に単語を分割するので、デザインが崩れずに表示されます。ただし、無理に改行が入るため、読みやすさには影響する可能性があります。

overflow-wrap プロパティと迷いがちなのはこちらのプロパティなのではないかと思います。

③ overflow-wrap プロパティ

overflow-wrap は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。

MDN

本記事の主役！
テキストがボックスを超える場合の折り返しを制御します。
word-break プロパティと比べてこちらは、テキストがあふれそうな時に自然な位置で改行を入れてくれるため、読みやすさを維持しながらデザインの制御ができるのが特徴です。特にレスポンシブデザインで、画面幅に合わせて見やすいテキスト配置を意識する場合に役立ちます。

④ hypens プロパティ

hyphens は CSS のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

MDN

英語やドイツ語などで、改行時にハイフンを付けて読みやすくするのに便利です。自動設定にすると、ブラウザが適切な位置にハイフンを挿入してくれるため、見た目が整います。

テキストの全体の表示や挙動に影響を与えるプロパティ

⑤ line-break プロパティ

line-break は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則 (禁則処理) を設定します。

MDN

⑥ text-overflow プロパティ

text-overflow は CSS のプロパティで、溢れた内容が非表示になる場合、それをどのようにユーザーに示すのかを設定します。切り取られるか、省略記号 (…) を表示するか、独自の文字列を表示するかです。

MDN

ブログカードを作ったりする場合に使うかもしれません。

⑦ writing-mode プロパティ

writing-mode は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は html 要素) に設定してください。

MDN

テキストの流れを大きく変えるため、状況によっては最初に適用すべきプロパティともいえます。

最終的には、設定がうまく効かないと感じた時、プロパティの優先度や競合に注目し、`white-space`や`word-break`などが他のプロパティに影響していないかを確認することでスムーズに問題が解決するかもしれません！

table 要素に
overflow-wrap プロパティは
効かない

table 要素には、何やら overflow-wrap プロパティが効かないらしいのです。

それを改善するためには、
table 要素にtable-layout: fixed;を設定することで改善する場合があります。その場合は width の設定も必要です！

ただし、既存の Web サイトにtable-layout: fixed;への修正をすることで、レイアウトが崩れてしまう可能性がありますので、事前に状況を確認してから作業することをオススメします。

table-layout: fixed;がどんな働きをするのかと言うと、table の列の幅をtable-layout: normal;では自動で設定されていたものを均等に設定してくれます。

そういえば勝手に列の幅が調整されていたのは、このtable-layoutプロパティが影響していたのですね。あれ、意外とありがた迷惑ですよね？私だけ？？

個人的にはデフォルトでfixedにしておくのが好みです。列の幅は自分で設定しますし！

まとめ

Web ページのテキストの折り返し（ワードラップ）をコントロールするには柔軟に使えるoverflow-wrap: anywhare;の使用をオススメします。width: min-content;によって幅が可変するボックス内のテキストを制御する場合は、overflow-wrap: anywhare;を指定する要素の親以上の先祖要素にwidth: min-content;を設定しないと崩れてしまうので要チェック！ボックスの max-width の設定も忘れずに！

うまく効かない場合は、プロパティの設定が他の同じような折り返しのプロパティと競合している場合があります。優先度をチェックして修正しましょう。

また、
table 要素に overflow プロパティを効かせるためには、table-layout: fixed;を設定する必要があります。

簡単そうに思えて、理解するのがなかなか難しいワードラップについてまとめてみました。いかがだったでしょうか。思いのほか長くなってしまいました。

ぜひいろいろ試して美しいテキストレイアウトを実現できるようになりましょう！

参考・出典

・MDN. 「overflow-wrap」. https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap, 2024年11月13日閲覧。

関連投稿:

CSS で transition を使ってアニメーションさせる方法について調べてみた 【CSS】フレックスボックスの使い方について調べてみた～基本編～【flex】 【初心者向け】カラーを設定する「値」の記述方法【CSS】 【CSS】グリッドレイアウトの使い方について調べてみた①~用語編~【grid】