[CSS] 줄바꿈 속성 word-wrap, break-word

text 형태의 태그의 경우 부모 컨테이너의 width보다 긴 텍스트의 경우 부모 컨테이너
텍스트가 끊기지 않고 한 줄에 계속 표시가 된다.

1.word-wrap

이를 강제 줄바꿈을 통하여 부모 컨테이너를 벗어나지 않게 해주는 속성이
word-wrap 속성이다

word-wrap: normal | break-word | initial(기본값) | inherit(부모 속성 상속)

word-wrap : normal
Default값, 텍스트가 길어도 끊기지 않고 한 줄에 계속 출력

word-wrap : break-word
텍스트가 길면 강제로 끊어서 줄바꿈 함

2.word-break

word-wrap 속성이 부모 컨테이너를 기준으로 줄바꿈 하는 것에 대한 속성이라면

word-break 속성은 줄바꿈 시 단어를 기준으로 할 지 한글자를 기준으로 할 지에 대한 속성이다

비아시아권(영어) 텍스트는 word-wrap만 적용하여도 기본적으로 단어 기준으로 줄바꿈이 되지만
아시아권(한,일,중)의 경우는 word-break; 속성을 이용하여 단어 기준으로 줄바꿈을 적용할 수 있다.

word-break: normal | break-all | keep-all | initial(기본값) | inherit(부모 속성 상속)

normal : CJK(중국-일본-한국) 아시아 문자는 글자 기준으로, 나머지 문자는 단어 기준으로 줄바꿈
break-all : 글자 기준으로 줄바꿈
keep-all : 단어 기준으로 줄바꿈