[CSS] word-break와 word-wrap

word-break 와 word-wrap 속성은 주로 줄 바꿈을 위해 사용됩니다.

 

💥 word-break

 

word-break 는 단어의 분리를 어떻게 할 것인지를 결정하는 속성입니다.

예제를 볼까요? 

 

ex) 오늘은•월요일입니다

ex) 오•늘•은•월•요•일•입•니•다•

 

word-break 의 속성 값으로는 normal, break-all, keep-all 이 있습니다.

 

normal의 경우 non-CJK와 CJK에서 값이 달라집니다.

( CJK는 아시아 언어를 의미합니다. Chian, Japanese, Korean을 줄여 CJK입니다. )

non-CJK에서는 공백(단어)을 기준으로, CJK에서는 음절(글자)을 기준으로 단어를 분리하죠.

 

break-all 은 음절을 기준으로 단어를 분리하고

keep-all 은 공백을 기준으로 단어를 분리합니다.

 

// 예시 문장 : 오늘은 월요일입니다

word-break : break-all;    // 오•늘•은•월•요•일•입•니•다•

word-break : keep-all;    // 오늘은•월요일입니다

 

 

💥 word-wrap

 

word-wrap 은 '비'아시아 언어(nonCJK)의 줄바꿈을 제어합니다.

 

word-wrap 의 속성 값으로는 normal, break-word 가 있습니다.

 

normal 은 기본값,

break-word 는 글자가 길어지면 강제로 끊어 줄 바꿈을 처리하는 속성(단어의 기준을 글자로 바꿈)입니다.

 

 

가끔 url 텍스트가 들어갈 경우 개행되지 않기 때문에 UI가 깨지는 현상이 발생합니다.

이럴 경우 해결 방법은 다음과 같습니다.

 

word-break: break-all;    // 영어 + 한글 데이터가 들어갈 수 있는 경우
word-wrap: break-word;    // 영어만 들어가는 경우