CSS word-break: keep-all;での、記号で「改行するかしないか」少し調べた件

単語の途中で切れてしまうのが見栄えが悪いので、
スペースを入れることにより、改行を操作するようにしたい...との要望を受けた。

「word-break: keep-all;」で可能だが、そもそも
どのブラウザでもスペースで改行されるのか？
ブラウザで差異はあるのか？
...とのことで、どうなるか調べた備忘録。

ちなみに、対象の箇所は以下CSSがかかっている。
（長すぎてはみ出した場合、3点リーダーが入るようになっている。）

h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    word-wrap: normal;
    width: 200px;
}

スペースで改行されるか、記号を区切りとみなして改行するのか

以下、記号（&、括弧など）があると単語がくっついていても改行する場合があったので、
どの場合でそうなるのか調べてみた。

例）かっこで改行される

例）かっこで改行されない

※改行するのは、文字が右端に到達して、単語が中途半端に見切れる場合のみ。
スペースが入っても、文字数が少なければ改行はされない。

下の図の見方

改行される	改行されない
○	X

※2017/06/07現在の結果です。

PC(Mac)

| | スペースで改行 | 「&」 |括弧（） |すみ括弧【】|句読点「、」|
|:---:|:------:|:------:|:------:|:------:|:------:|:------:|
| Google Chrome |○|○|○|○|○|
| Safari | ○（半角スペースのみ。全角スペース不可。）|X|X|X|X|
| FireFox | ○（半角スペースのみ。全角スペース不可。）|X|X|X|X|

PC(Win)

	スペースで改行	「&」	括弧（）	すみ括弧【】	句読点「、」
Google Chrome	○	○	○	○	○
FireFox	○（半角スペースのみ。全角スペース不可。）	X	X	X	X
IE11	○	X	○	○	○
Edge	○	X	○	○	X

iPhone6 (iOS10.3.2)

	スペースで改行	「&」	括弧（）	すみ括弧【】	句読点「、」
Google Chrome	○（半角スペースのみ。全角スペース不可。）	X	X	X	X
Safari	○（半角スペースのみ。全角スペース不可。）	X	X	X	X

Android(4.4系)

	スペースで改行	「&」	括弧（）	すみ括弧【】
Google Chrome	○（半角スペースのみ。全角スペース不可。）	○	○	○

まとめ

すべてのブラウザで、スペースを入れることにより改行が可能でした。
注意が必要なのは、スペースは 半角スペースでないと改行されない 点です。

また、ブラウザによっては、括弧や、&マークを記号と見なして
改行が入るようなので、記号にもスペースを入れたほうが無難。

また改行は、overflow-wrap: break-word;にすると効かないらしいので注意。