단어의 중간에 끊어져서 보기 흉하다
공백을 추가해서 줄 바꾸기를 원합니다.라고 요구했다.
「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

안드로이드(4.4 계열)

공백 줄 바꿈
「&」
괄호()
각괄호【】
Google Chrome
○(반각 공간만 있고 전각 공간은 안 된다.)
○
○
○

총결산

모든 브라우저에서 공백을 통해 줄을 바꿀 수 있습니다.
주의해야 할 것은 공백은 반드시 반각 공백이어야만 줄을 바꿀 수 있다는 것이다.
또 일부 브라우저는 괄호와 & 표시를 기호로 간주한다
줄을 바꿔야 하기 때문에 기호에도 빈칸을 넣는 것이 비교적 안전하다.
overflow-wrap:break-word로 줄 바꾸기;이렇게 하면 효과가 없을 것 같으니 주의하세요.