overflow-wrap・word-wrapで単語途中の改行を指定【CSS】

overflow-wrap・word-wrapは単語の途中でも改行するかどうかを指定するプロパティです。

overflow-wrap・word-wrapの指定方法

overflow-wrap・word-wrapプロパティでは「normal」が初期値として指定されていますが、「normal」は折り返しが許されている位置で改行するので、行ボックスから単語がはみ出ることもあります。

「normal」の代わりに「break-word」を指定すると、適当な折り返しがない場合でも、単語の途中で自動的に改行されます。

下の2つはシェイクスピアの戯曲で出てくる言葉。

長ったらしい文章のように見えますが、1つの英単語です。

上はword-wrapプロパティでnormalを指定した場合。

単語が折り返されずに黄色の行ボックスからはみ出ています。

一方、下の方にはword-wrapプロパティでbreak-wordを指定しており、単語の途中でも黄色の行ボックスに収まるように改行されているのがわかります。

overflow-wrap・word-wrapプロパティでnormalとbreak-wordを指定したときでは、このような違いがあります。