word-break와 word-wrap은 줄바꿈을 위해 사용합니다. 구체적으로 들어가면 word-word 속성이 비아시아 언어의 줄바꿈을 결정하고, word-break는 아시아 언어, 즉 CJK언어의 줄바꿈을 결정합니다.
word-break
속성값으로 normal(기본값), break-all, keep-all를 갖습니다.
normal 속성값은 기본값입니다. 브라우저의 기본값에 따라 줄바꿈이 일어납니다.
break-all 속성값은 문자를 강제로 줄바꿈 할 수 있습니다. CJK언어에서 사용할 때는 normal처럼 작동하며 비아시아 언어에 사용할 때는 임의대로 줄바꿈을 할 수 있습니다.
keep-all 속성값은 단어 단위로 줄바꿈이 일어납니다. 비아시아 언어에 사용될 때는 normal처럼 작동합니다.
word-wrap
속성값으로 normal(기본값)과 break-word를 갖습니다.
normal 속성값은 기본값입니다. 박스의 가로 넓이보다 글자가 길어져도 줄바꿈이 일어나지 않고, 한 줄로 계속 표시됩니다.
break-word 속성값은 박스의 가로 넓이보다 글자가 길어지면 줄바꿈이 일어납니다. 비아시아 언어일 경우 단어 단위로 줄바꿈이 일어납니다.
만약 한글로만 개발을 한다면...
한글로만 개발할 경우 word-break 속성을 사용해서 줄바꿈이 일어나도록 하면 됩니다. 한글에서 word-wrap 속성을 사용하면 속성별로 차이점을 발견할 수 없을 것입니다.
'CSS' 카테고리의 다른 글
Sass에 대한 간략한 공부 (0) | 2020.12.08 |
---|---|
margin collapse 관련 레퍼런스 해석 (마진 병합) (0) | 2020.09.01 |
<strong>과 <em> 차이점 (0) | 2020.07.30 |
CSS 속성 선택자 (0) | 2020.07.30 |
IR 기법 - 대체 텍스트 숨김 (0) | 2020.07.24 |