CSS overflow-wrap 単語が表示域を超える時の改行

overflow-wrapプロパティ

overflow-wrap : 値
word-wrap : 値

overflow-wrapプロパティは、単語が表示領域を超える場合の改行方法を指定します。
CSS3 Text 仕様書で名前がword-wrapからoverflow-wrapになりました。
word-wrapでも使用できます。

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

単語が表示領域を超える場合の改行方法のサンプルです。

<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>

2行目は、normalです。英字のため改行されません。
4行目もnormalですが、日本語のため改行されます。

以下は、実行結果です。

関連の記事

CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow 表示幅超える/スクロール表示非表示
CSS text-decoration 文字に線を引くサンプル
CSS word-break 単語の改行方法を指定

△上に戻る