【css】文字を改行させる「word-wrap」と「overflow-wrap」について

「word-wrap」と「overflow-wrap」どっち使えばいい？

IE11で「overflow-wrap」が使えなかったので一応以下のように設定しておくとよさげ

body{
	word-wrap : break-word;
	overflow-wrap : break-word;
}

そもそも「overflow-wrap」は「word-wrap」が改名したものらしい

どっちも囲ってる要素をはみ出しそうなら単語の途中に改行を入れるらしい
ただ、改行をする際の条件がちょい違うみたい

▼word-break
テキストが囲っている要素がはみ出したところで改行する

▼overflow-wrap
テキストが囲っている要素に入りきらないところで改行する

？

ちょっとよくわからず試してみたけど
差があったのが「japan-tokyo」のようなハイフンでつなげた単語の時だった

//　「word-wrap: break-word;」を使ったとき
○○ ×× japan-
tokyo

//　「overflow-wrap: break-word;」を使ったとき
○○ ×× 
japan-tokyo

「word-wrap: break-word;」はハイフンつなぎの単語はハイフンのところで改行してたけど「overflow-wrap: break-word;」はハイフンつなぎも単語として認識していた

まとめ

とりあえず単語の途中で改行させたくないなら「overflow-wrap: break-word;」をとりあえず使っておけばよさげだから

word-wrap : break-word;
overflow-wrap : break-word;

と僕はこの順番で指定してる