word-break

‘날씨가 · 좋아요’ / ‘날 · 씨 · 가 · 좋 · 아 · 요’ 와 같이 공백, 띄어쓰기, 음절 에 따른 단어의 분리를 어떻게 할 것인지 결정한다. 즉 줄 바꿈을 어떻게 할 것인가 이다.

word-break 속성은 단어의 분리를 결정하여 줄 바꿈을 관여한다.

줄 바꿈은 허용된 중단점에서 수행되는 것이며, 모든 속성이 기본값이라는 전제하에 줄 바꿈은 대부분의 non-CJK의 경우 공백(띄어쓰기)에서 줄바꿈이 수행되고, CJK의 경우 음절에서 수행된다.

normal (기본값) break-all keep-all (CJK에만 적용됨)
non-CJK 중단점: 공백(띄어쓰기, 하이픈’-‘) 중단점: 음절 중단점: 공백(띄어쓰기, 하이픈’-‘)
CJK 중단점: 음절 중단점: 음절 중단점: 공백(띄어쓰기, 하이픈’-‘, 그 외 기호)

<aside> 💡 중국어/일본어/한글의 경우 W3C 문서에서 CJK(Chinese, Japanes, Korean의 약자)로 사용하고 있으며, 그 외 언어는 non-CJK(숫자, 영어, 베트남어 등)으로 지칭한다. 중단점은 · 로 표기한다.

</aside>

word-wrap

콘텐츠 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정한다.

word-wrap 적용 시 white-space는 기본값 이어야 합니다.

normal(기본값) break-word
non-CJK 단어넘침 O 단어넘침 X
CJK 단어넘침 X 단어넘침 X

보통 실무에서 word-break: keep-all / word-wrap: break-word 를 사용

Untitled