ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。

1. 2013 年 6 月時点の結論
2. word-wrap: break-word を使うとどうなるのか
3. word-break: break-all を使うとどうなるのか
4. word-wrap: break-word と word-break: break-all を両方使うとどうなるのか
5. なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか
6. どこに word-wrap: break-word を指定するのか
7. position: aboslute や display: inline-block との組み合わせ
8. display: table-cell との組み合わせ
9. display: flex との組み合わせ
10. white-space: pre や white-space: nowrap との組み合わせ
11. word-wrap というプロパティ名
12. 参考文献

2013 年 6 月時点の結論

• word-wrap: break-word を使ってください。
• word-break: break-all は使わないでください。
• display: table-cell や display: inline-block と組み合わせるときは、明示的な最大幅の指定が必要かもしれません。

word-wrap: break-word を使うとどうなるのか

単語 (欧文文字の連続) の途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返します。単語の途中で折り返しが発生するのは、その単語の幅が行ボックスの幅より大きいときのみです。単語の幅が行ボックスの幅より小さければ、その単語全体が次の行に送られることはあっても、その単語の途中で折り返されることはありません。

�禺画像] word-wrap: break-word を指定した例。単語 supercalifragilisticexpialidocious の途中で折り返される。

word-break: break-all を使うとどうなるのか

任意の文字間での折り返しが許容され、言語に関わらず一切の禁則処理が無効になります。英単語の途中で行ボックスの幅からあふれそうになれば、あふれる直前で折り返されます。開き括弧の直後や閉じ括弧の直前、句読点の直前でも折り返されます。

�禺画像] word-break: break-all を指定した例。単語 such 及び supercalifragilisticexpialidocious の途中で折り返される。

word-wrap: break-word と word-break: break-all を両方使うとどうなるのか

word-break: break-all を使った時点でどの文字の間でも折り返しが起こりうるので、word-wrap: break-word による折り返し発生条件に到達しません。つまり、両方指定するのは word-break: break-all だけの指定と実質変わりません。

なぜ word-break: break-all ではなく