[HTML/CSS] 줄바꿈 제어 속성 word-break / word-wrap(overflow-wrap)

TL;DR

---

박스 영역을 벗어나거나, 불필요한 공백이 생기는 등 대부분의 줄바꿈 문제는 아래 두 속성으로 해결할 수 있다.

word-break: break-all; /* 음절(글자)를 기준으로 줄바꿈 */
word-wrap: break-word; /* 영역을 넘친 단어 분리(줄바꿈) */

 

word-break

---

💡 줄바꿈할 중단점의 기준을 바꿀 수 있는 속성

 

word-break 속성은 글자를 어떻게 분리해서 줄바꿈할지 결정하는 속성이다. CJK는 음절(글자), non-CJK는 공백과 - 하이픈이 기본 중단점이다. word-break 속성으로 줄바꿈할 중단점의 기준을 바꿀 수 있다. 아래는 언어별 속성 값에 따라 달라지는 중단점을 정리한 표 — WIT 블로그 참고  

	normal (기본값)	break-all	keep-all (CJK만 해당)
non-CJK	띄어쓰기, - (하이픈)	음절	띄어쓰기, - (하이픈)
CJK	음절	음절	띄어쓰기, - (하이픈), 그 외 기호

 

정리하면 중국어/일본어/한국어는 기본적으로 음절(글자)를 기준으로 줄바꿈되며, keep-all 속성을 사용하면 띄어쓰기, -(하이픈) 기호 지점에서 줄바꿈된다(ex 박스 영역 끝 지점에 띄어쓰기가 있다면 다음 줄로 넘어감).

 

영어를 포함한 그 외 언어는 기본적으로 띄어쓰기 -(하이픈)을 기준으로 줄바꿈 되며, break-all 속성을 사용하면 음절(글자)을 기준으로 줄바꿈 된다.

 

 

💡 ... !!! 처럼 마침표/느낌표 등 연속적인 “기호”는 중단점이 음절(break-all)이라도 박스 영역을 벗어나게 된다. 이땐 word-wrap: break-word; 속성을 사용해서 줄바꿈할 수 있다.

 

만약 아래처럼 음절 단위가 중단점이 아닐 때(CKJ는 keep-all, non-CJK는 normal, keep-all), 박스 영역의 가로 값 보다 긴 단어가 있다면 다음 중단점을 만날 때까지 박스를 벗어난다.

 

이미지 출처 WIT

중단점이 '공백'인 경우 (예: some·Latin | 한글·좋아요)

1. 단어가 한 줄의 남은 공간보다 길면 줄 바꿈 된다.
2. 박스 영역의 가로 값 보다 긴 단어는 중단점이 나타날 때까지 박스를 강제적으로 뚫고 넘치게 된다.
3. 박스 영역의 가로 값 보다 긴 단어에 기호가 포함되어 있다면, ‘언어+기호’ 조합의 ‘언어’에 따라 기호가 중단점이 되기도 한다. non-CJK는 ‘기호’가 하이픈 - 일 때 줄 바꿈 된다(그 외 기호는 중단점으로 작용하지 않음). CJK는 하이픈뿐만 아니라 대부분의 기호가 중단점으로 작용하여 줄 바꿈 된다.(파이어폭스에서는 기호를 중단점으로 작용X)
4. 박스 영역의 가로 값 보다 긴 기호가 공백 없이 나열된다면, 중단점이 나타날 때까지 박스를 강제적으로 뚫고 넘치게 된다.

 

중단점이 '음절'인 경우 (예: s·o·m·e·L·a·t·i·n | 한·글·좋·아·요)

한 줄의 가장 끝부분에 위치한 단어가 글자로 나뉘어 줄 바꿈 된다.그래서 1, 2, 3 모두 음절에서 줄 바꿈 되기 때문에 박스 영역을 넘치지 않는다. 하지만 예외도 있다.

박스 영역의 가로 값 보다 긴 단어에 기호(마침표. 와 느낌표! 등) 으로만 연속적으로 나열 된다면, 중단점이 음절이라 할지라도 박스 가로 영역을 강제적으로 뚫고 넘치게 된다.모든 기호에서 발생하는 건 아니며 일부 기호에서 예외적으로 발생한다.

 

word-wrap (overflow-wrap)

---

💡 요소의 경계에서 박스 영역을 벗어난 긴 단어를 어떻게 처리할지 결정하는 속성

 

위처럼 ➊음절 단위가 중단점이 아닐 때(CKJ는 keep-all, non-CJK는 normal, keep-all) 띄어쓰기나 하이픈(CJK는 그 외 기호도 포함)이 없는 연속적인 단어가 박스 너비보다 길다면 박스를 벗어난다. 또한, ➋박스 너비보다 긴 연속적인 기호는 word-break: break-all 속성을 사용해도 줄바꿈 되지 않는다.

 

이땐 word-wrap 속성을 사용하면 된다. word-wrap은 요소의 경계(박스의 border 부분)에서 긴 단어를 어떻게 처리할지 결정하는 속성으로, 넘친 단어를 임의 분리(줄바꿈)할 수 있다.

 

넘친 단어의 임의 분리는 음절에서만 발생하며(박스 영역을 넘친 “단어” 내에서 줄바꿈), white-space 속성이 기본 값(normal) 일 때 만 적용된다. 또한 박스의 width가 지정되어 있어야 하므로 block 혹은 inline-block 박스여야 한다.

 

word-wrap 속성은 normal(기본값), break-word 2가지 옵션이 있다.

• normal : 중단점에서 줄바꿈
• break-word : 요소의 경계에서 중단점이 아니어도 줄바꿈

 

아래는 각 속성 값에 따라 단어 넘침(박스를 벗어남) 유무를 정리한 표(word-break 속성이 기본값 일 때)

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

 

아래 예시에서 word-break 속성을 모두 keep-all로 설정했다. 때문에 띄어쓰기나 하이픈 - 을 만날때까지(CJK라면 그 외 기호도 포함) 줄바꿈하지 않고 박스 영역을 벗어난다. 여기에 word-wrap: break-word 속성을 주면 단어 내에서 박스를 넘어선 부분이 줄바꿈 된다.

 

참고로 word-wrap: normal, word-break: break-all 일 땐 기호만 박스를 벗어난다

 

코드펜

---

See the Pen word-break / word-wrap 스터디 by ColorFilter (@colorfilter) on CodePen.

 

 

레퍼런스

---

• word-break 속성과 word-wrap 속성 알아보기 | WIT블로그
• CSS / word-wrap / 긴 단어 처리 방법 정하는 속성  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요