‘날씨가 · 좋아요’ / ‘날 · 씨 · 가 · 좋 · 아 · 요’ 와 같이 공백, 띄어쓰기, 음절 에 따른 단어의 분리를 어떻게 할 것인지 결정한다. 즉 줄 바꿈을 어떻게 할 것인가 이다.
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 적용 시 white-space는 기본값 이어야 합니다.
| normal(기본값) | break-word | |
|---|---|---|
| non-CJK | 단어넘침 O | 단어넘침 X |
| CJK | 단어넘침 X | 단어넘침 X |
보통 실무에서 word-break: keep-all / word-wrap: break-word 를 사용