word-break 종류

normal

긴 문장이 줄바꿈 없이 부모 컨테이너 너비를 초과하지 않는 한 자연스럽게 문장이 다음 줄로 넘어갑니다

기본 줄 바꿈 규칙(normal)은 CJK 언어의 중단점은 음절(일본어는 문자)이고, Non-CJK 언어의 중단점은 공백입니다

 

123456789 가나다라마바사아자차카타파하 abcdefghijklmnopqrstuvwxyz 일이삼사오육칠팔구십 자축인묘진사오미신유술해

break-all

공백이 아닌 임의의 위치에서도 줄바꿈이 발생할 수 있습니다

한국어 문장이 단어 중간에서 끊어져도 상관없는 경우 사용됩니다

 

123456789 가나다라마바사아자차카타파하 abcdefghijklmnopqrstuvwxyz 일이삼사오육칠팔구십 자축인묘진사오미신유술해

keep-all

한국어(CJK 언어)에서 단어 중간에서 줄바꿈이 발생하지 않도록 방지합니다

영어와 달리 공백이 없는 한글에서 주로 사용되며, 단어가 중간에 잘리지 않도록 합니다

 

123456789 가나다라마바사아자차카타파하 abcdefghijklmnopqrstuvwxyz 일이삼사오육칠팔구십 자축인묘진사오미신유술해

break-word

단어가 부모 컨테이너를 초과할 경우, 단어 중간에서 줄바꿈이 발생합니다

이 속성은 더 이상 권장되지 않으며, overflow-wrap: break-word;가 더 일반적으로 사용됩니다

 

123456789 가나다라마바사아자차카타파하 abcdefghijklmnopqrstuvwxyz 일이삼사오육칠팔구십 자축인묘진사오미신유술해

overflow-wrap: break-word

부모 컨테이너 너비를 넘는 긴 단어나 문장이 있을 때, 줄바꿈이 발생하여 텍스트가 잘리지 않고 줄바꿈됩니다. word-break: break-word;와 비슷하지만 더 권장되는 방식입니다.

 

123456789 가나다라마바사아자차카타파하 abcdefghijklmnopqrstuvwxyz 일이삼사오육칠팔구십 자축인묘진사오미신유술해

 

정리

• normal: 공백이 있는 곳에서만 줄바꿈, 한국어는 자연스럽게 줄바꿈됨
• break-all: 단어 중간에서도 줄바꿈이 허용되며, 단어가 길어도 자를 수 있음
• keep-all: CJK 언어에서 단어 중간에 줄바꿈이 일어나지 않도록 함
• break-word: 긴 단어가 부모 요소를 넘길 때 강제 줄바꿈 (권장되지 않음)
• overflow-wrap: break-word;: 텍스트가 부모 요소를 넘지 않도록 줄바꿈을 허용 (권장됨)