CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)

CSSの単語が表示領域を超える場合の改行方法を指定するサンプルです。
overflow-wrap / word-wrapを使用します。

overflow-wrap / word-wrap プロパティ

overflow-wrap : 値
word-wrap : 値

値	説明
normal	単語が表示領域を超える場合、改行せずに表示します。(初期値)
break-word	単語が表示領域を超える場合、単語の途中で改行します。
値を継承する

CSS3 Text 仕様書でword-wrapの名前が変更になりoverflow-wrapになりました。word-wrapでも使用できます。
日本語は、値がnormalでも改行されます。
以下はMDNのoverflow-wrapプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

サンプル

overflow-wrapのサンプルです。

1番上は、normalです。改行せずに表示します。
2番目は、break-wordです。単語の途中でも改行します。
3番目は、normalですが、日本語は改行して表示されています。

コード

上記サンプルのコードです。

<style>
#p1{
	overflow-wrap:normal;
}
#p2{
	overflow-wrap:break-word;
}
#p3{
	overflow-wrap:normal;
}
p{border:1px solid #000;width:100px;height:30px;
margin-bottom:20px;text-indent:10px;background:LightCyan;}
</style>

<p id="p1">tangonokaigyou</p>
<p id="p2">tangonokaigyou</p>
<p id="p3">日本語は改行される</p>