CSS3

プロパティ

overflow-wrap、word-wrap

→●、mdn（overflow-wrap、word-wrap）

過フロー時の折り返し。

このプロパティは、他による分断が許容されない行においても［ 他では分断不能な文字列が、行ボックスに収まるには長過ぎるとき］には過フローしないように、ユーザー エージェントが行のどこかで分断してもよいかどうかを指定する。これは、white-space が折り返しを許容するときに限り、効果を発揮する。

normal

行を分断してもよい所は、許容される分断点に限られる。しかしながら、［word-break: keep-all により導入される制約］は、行の中に［受容可能な分断点が他にない］場合には、word-break: normal に合致するように緩められてもよい。

<DIV style="border:1px solid red;
 word-wrap:normal;
 width:100px;
 font-size:20px;
">あい うえおかきくけ<BR>abcd efghijklmnop
</DIV>

anywhere

他では分断不能な文字並びは、行の中で［受容可能な分断点が他にない］場合には，任意の地点で分断されてもよい。文字の形状付けにおいては、依然として、単語が分断されていなかったかのように形状付けられ、各 書記素クラスタは、1 個の単位として一緒のままにされるものとする。分断点には、ハイフン化文字は挿入されない。

この値により導入された自動折り返し機会は、最小内容 内在的サイズを計算するときにも考慮される。

<DIV style="border:1px solid red;
 word-wrap:anywhere;
 width:100px;
 font-size:20px;
">あい うえおかきくけ<BR>abcd efghijklmnop
</DIV>

break-word

anywhere と同じにふるまうが、この値により導入された自動折り返し機会は、最小内容 内在的サイズを計算するときには考慮されない。

<DIV style="border:1px solid red;
 word-wrap:break-word;
 width:100px;
 font-size:20px;
">あい うえおかきくけ<BR>abcd efghijklmnop
</DIV>

旧来の理由から、ユーザー エージェントは、word-wrap を overflow-wrap プロパティの旧来の別名として扱うものとする。

関連

white-space、word-break。

テスト