overflow-wrapプロパティ

overflow-wrapプロパティは要素内の行の改行方法を指定するプロパティです。CSS3においてword-wrapプロパティを基に策定されたプロパティです。

overflow-wrapプロパティに指定できる値

overflow-wrapプロパティには次の値を設定することができます。

値	内容
`normal`	初期値。行の途中で改行を行う。
`break-word`	行の途中で改行するポイントが無い場合、単語の途中であっても改行を行う。

以降はoverflow-wrapプロパティを指定するコード例と、ブラウザでの表示例になります。

overflow-wrapプロパティの指定によって要素内にあるテキストの改行の扱いがどう変化するかを確認してみましょう。

.text1 {
  overflow-wrap: normal;
}
.text2 {
  overflow-wrap: break-word;
}

<p class="text1">He answered it immediately.</p>
<p class="text2">He answered it immediately.</p>

ブラウザ（Chromeを使用）で表示すると以下のようになります。
overflow-wrapプロパティの指定によってテキストの単語の折り返しに違いがあることが分かります。
単語の途中で改行すると読みづらくなってしまう可能性もあるため、要素内に納める表示を優先するかは慎重に必要があります。