CSS3時代のテキストの折り返し設定
CSS3では折り返し設定を制御できるプロパティが2つ
テキストの折り返し設定を制御できるプロパティはCSS3になってから2つ存在することになってしまっています。
overflow-wrapは、元々Microsoft IE独自拡張のword-wrapがCSS3の仕様策定の段階で、名称変更されたもので、word-wrapはoverflow-wrapの別名称とみなされているようです。
ただまだ、Internet ExplorerやFirefoxなどは、プロパティ名称としては「word-wrap」のみをサポートなので、後方互換の意味も兼ねてword-wrapを併記したほうがいいでしょう。
[参考]
http://caniuse.com/#search=overflow-wrap
[使い方例]
.content p { word-break:break-all; }
.content p { overflow-wrap:break-word; word-wrap:break-word; }
word-breakとoverflow-wrap(word-wrap)の違い
word-breakとoverflow-wrap(word-wrap)は同じような設定をするプロパティなのですが、その動作が微妙に違っていたりします。
word-break:break-allの折り返しの法則
word-break:break-allでは、一切の禁則処理が解除されます。ボックスの横幅からはみ出す場合、すべての単語の途中で折り返しします。そのため、例えばとても短い単語(or,and,is)などの途中で折り返してしまい、英文としてとても読みづらい文章になってしまいます。
日本語でも行頭に句読点などが来てしまう場合があり、とても読みづらくなるケースが考えられます。
word-wrap:break-wordの折り返しの法則
word-wrap:break-wordもボックスの横幅からはみ出した場合、単語の途中で折り返しをします。こちらは可能な限り禁則処理を保持し、できるだけ単語途中での折り返しを避けるように表示します。
また、テーブルセルやfloatが指定されている要素では、横幅を設定していないと折り返しされないので、きちんと横幅を指定することが必要です。