[CSS] word-wrap, overflow-wrap, word-break 차이점

1. 언어별 줄바꿈(강제개행) 기준

 

- 한국어: 글자 기준으로 강제 줄바꿈 (글자 기준)

 

- 영어: 단어/공백/물음표(?)/하이픈(-) 기준으로 강제 줄바꿈

 

2. overflow-wrap 오버플로우 됐을 때 줄바꿈 어떻게 할지??

※ 용어가 word-wrap에서 overflow-wrap으로 바뀜

 

텍스트가 박스 너비를 초과할 때(=overflow) 줄바꿈을 어떻게 할 지 정하는 속성

(width 값이 있을 때에만 해당)

 

CJK 언어(Chinese, Japanese, Korean)는 글자를 기준으로 줄바꿈을 하기 때문에 텍스트가 박스 너비를 초과하면 무조건 줄바꿈이 되지만, 영어는 단어를 기준으로 줄바꿈을 하기 때문에 아주 긴 단어는 박스를 초과해버린다.

 

overflow-wrap: normal;
언어별 특성에 따라 다르다.
- 한국어는 글자 기준으로 줄바꿈
- 영어는 단어 기준으로 줄바꿈 (연속된 문자는 줄바꿈 안됨)

overflow-wrap: break-word;
글자 기준으로 강제 줄바꿈
※ 한국어는 원래부터 글자 기준으로 줄바꿈이 되니까, 굳이 이 속성을 사용할 필요가 없다.

 

3. word-break 줄바꿈을 어떻게 할 지??

word-break: normal; 
(기본값) 영어는 단어 기준으로, 한국어는 글자 기준으로 줄바꿈

word-break: break-all;
(한국어처럼) 글자 기준으로 줄바꿈

word-break: keep-all;
(영어처럼) 단어 기준으로 줄바꿈

word-break: break-word;
평상시에는 언어 특성에 따라 줄바꿈하고, 오버플로우되면 (한국어처럼) 글자 기준으로 줄바꿈