[HTML, CSS] 줄바꿈 관련 속성 (word-break, word-wrap)

이번 글에서는 줄바꿈과 관련된 속성인 ① word-wrap, ② word-break에 대해서 설명하도록 하겠습니다.

줄바꿈은 글이 쓰여진 언어에 따라서 차이가 발생하게 됩니다. 크게 중국어/일본어/한국어인 CJK(Chinese, Japanese, Korean)과 그 외 언어인 non-CJK(숫자, 영어, 베트남어 ), 두 가지로 구분해서 설명드리겠습니다.

 

① word-wrap 속성

word-wrap 속성은 주어진 공간을 넘친 긴 단어들이 분리될 수 있도록 허용해주는 속성입니다. 동일한 효과를 내는 속성으로는 overflow-wrap 속성이 있습니다. overflow-wrap 속성은 word-wrap 속성의 확장판의 목적으로 만들어졌는데, 많은 브라우저들이 도입하게 되면서 서로 동일한 속성이 되었습니다. overflow-wrap 속성의 별칭(alias)가 word-wrap 속성이라고 생각하시면 됩니다. 

속성 값	설명
normal	정해진 분리점에서만 줄바꿈이 됩니다. (기본 값)
break-word	임의의 분리점에서 줄바꿈이 가능해집니다.
anywhere	임의의 분리점에서 줄바꿈이 가능해집니다.

여기서 "정해진 분리점"은 앞서 구분한 언어에 따라서 정의가 다르게 되어 있습니다. CJK의 경우 분리점이 음절 단위인 반면, non-CJK의 분리점은 공백과 하이픈 기호입니다. 따라서 word-wrap 속성은 non-CJK에게만 해당되고, CJK에는 아무 영향이 없습니다. 분리점이 음절인 경우 임의의 분리점에서 줄바꿈을 해도 결과는 동일하기 때문입니다. 

 

왼쪽: normal, 오른쪽: break-word

word-wrap 속성이 normal(기본 값)으로 설정되어 있을 때 non-CJK에 해당하는 영어 단어는 공백 단위로만 줄바꿈이 되기 때문에, 가로 넓이보다 긴 단어는 넘치게 되는 것을 확인할 수 있습니다.

 

break-word와 anywhere의 차이는, min-content 키워드를 사용해서 요소의 최소 넓이를 구할 때 나타납니다. break-word일 때는 단어가 분리되는 것을 최소 넓이에 고려하지 않는 반면, anywhere일 때는 단어가 분리되는 것도 최소 넓이에 고려합니다.

 

② word-break 속성

word-break 속성은 줄바꿈이 될 때 단어가 어떻게 분리되는지를 지정해줍니다.

속성 값	설명
normal	언어별로 정해진 분리점을 사용합니다. (기본 값)
break-all	CJK : normal 속성값과 동일하게 작동합니다.  non-CJK : 임의의 문자에서 분리될 수 있습니다.
keep-all	CJK : 공백, 하이픈 기호, 그 외 기호 등에서만 분리됩니다. non-CJK : normal 속성 값과 동일하게 작동합니다.

 

왼쪽부터 순서대로 normal, break-all, keep-all

 

* 일부 특수 기호들은, 연속적인 나열이 가로 넓이보다 길다면 분리점과 상관없이 줄바꿈이 되지 않습니다.

** word-break의 속성 값 중 하나였던 break-word는 이제 사용되지 않습니다. 

 

word-wrap: break-word;와 word-break: break-all;는 임의의 분리점에서 줄바꿈을 한다는 점에서 유사해 보입니다. 하지만 전자는 단어들을 최대한 분리하지 않으려 한다는 점에서 차이가 있습니다. word-wrap: break-word;는 남는 공간이 만들어지더라도 분리되는 단어를 최소화하는 것입니다. 반면, 후자(word-break: break-all;)의 경우에는 남는 공간 없이 글자가 넘치게 되는 위치에서 무조건 줄바꿈을 합니다. 

왼쪽 : word-wrap: break-word;, 오른쪽 : word-break: break-all;