word-wrap, word-break의 차이

 

줄바꿈 관련 속성 중 word-wrap과 word-break가 종종 헷갈리곤 했는데,

둘의 차이를 정확하게 짚고 넘어가보겠습니다. 

 

 

웹에서는 언어를 크게 2가지로 분류합니다.

 

아시아 언어(CJK = China, Japan, Korea) : 음절, 문자로 줄바꿈

비아시아 언어(언어, 숫자, 영어, 베트남어 등) : 공백으로 줄바꿈

 

언어별로 문자가 다르게 랜더링 되기 때문에 

해당 언어의 줄바꿈을 설정 할 때 word-wrap과 word-break 중 적절한 것으로 사용하면 됩니다.

 

 

word-wrap

- 비아시아 언어의 줄바꿈을 제어

- 속성값: 

• normal: 기본값
• break-word: 글자가 길어지면 강제로 끊어서 줄 바꿈 처리 → 단어의 기준을 글자로 바꿈

 

word-break

- 아시아(CJK = China, Japan, Korea), 비아시아 언어의 줄바꿈을 모두 제어

- 속성값: 

• normal: 기본값. 아시아언어는 글자 기준, 비아시아 언어는 단어 기준으로 줄 바꿈
• break-all: 글자 기준으로 줄 바꿈. 아시아언어에서 사용할 때는 normal처럼 작동하며 비아시아 언어에 사용할 때는 임의대로 줄바꿈을 할 수 있음.
• keep-all: 단어 기준으로 줄 바꿈. 비아시아 언어에 사용될 때는 normal처럼 작동

 

 

 

 

정리

비아시아 언어만 사용한다면 word-wrap: break-wrod를,
아시아 언어를 사용한다면 wrod-break: break-all로 줄 바꿈을 조절하면 된다.

 

 

 

 

 

출처: 

https://nuhends.tistory.com/7

https://velog.io/@ongddree/css-%EC%A4%84%EB%B0%94%EA%BF%88-%EC%8A%A4%ED%83%80%EC%9D%BC-word-break-overflow-wrap