박스 영역을 벗어나거나, 불필요한 공백이 생기는 등 대부분의 줄바꿈 문제는 아래 두 속성으로 해결할 수 있다.
word-break: break-all; /* 음절(글자)를 기준으로 줄바꿈 */
word-wrap: break-word; /* 영역을 넘친 단어 분리(줄바꿈) */
<aside> 💡 줄바꿈할 중단점의 기준을 바꿀 수 있는 속성
</aside>
word-break 속성은 글자를 어떻게 분리해서 줄바꿈할지 결정하는 속성이다. CJK는 음절(글자), non-CJK는 공백과 - 하이픈이 기본 중단점이다. word-break 속성으로 줄바꿈할 중단점의 기준을 바꿀 수 있다. 아래는 언어별 속성 값에 따라 달라지는 중단점을 정리한 표 — WIT 블로그 참고
| normal (기본값) | break-all | keep-all (CJK만 해당) | |
|---|---|---|---|
| non-CJK | 띄어쓰기, - (하이픈) |
음절 | 띄어쓰기, - (하이픈) |
| CJK | 음절 | 음절 | 띄어쓰기, - (하이픈), 그 외 기호 |
정리하면 중국어/일본어/한국어는 기본적으로 음절(글자)를 기준으로 줄바꿈되며, keep-all 속성을 사용하면 띄어쓰기 -(하이픈) 기호 지점에서 줄바꿈된다*(ex 박스 영역 끝 지점에 띄어쓰기가 있다면 다음 줄로 넘어감)*
영어를 포함한 그 외 언어는 기본적으로 띄어쓰기 -(하이픈)을 기준으로 줄바꿈 되며, break-all 속성을 사용하면 음절(글자)를 기준으로 줄바꿈 된다.
<aside>
💡 ... !!! 처럼 마침표/느낌표 등 연속적인 “기호”는 중단점이 음절(break-all)이라도 박스 영역을 벗어나게 된다. 이땐 word-wrap: break-word; 속성을 사용해서 줄바꿈할 수 있다.
</aside>
만약 아래처럼 음절 단위가 중단점이 아닐 때(CKJ는 keep-all, non-CJK는 normal keep-all), 박스 영역의 가로 값 보다 긴 단어가 있다면 다음 중단점을 만날 때까지 박스를 벗어난다.
