[CSS3] 영역 크기의 따라 글자가 다음줄로 넘어갈때 써야하는 word-break

word-break 란 css에서 줄바꿈을 어떻게 할 것인가를 결정한다!

 

지정된 width 값보다 문장이 길어질때 줄바꿈이 되는 위치를 결정한다.

 

예를들어

 

안녕하세요. 홍길동입니다. 

 

위와 같은 문장이 있을 때 

 

안녕하세요. 홍

길동입니다.

 

안녕하세요.

홍길동입니다.

 

와 같이 어떤 방법으로 줄바꿈 할것이냐의 차이 입니다. 

 

 

 

 

word-break: normal

한글은 한자한자 / 영어는 단어로 / 기타 다른언어의 텍스트는 임의의 지점에서 깨진다.

 

word-break: break-all

이건 모든 글자가 한글자씩 나뉜다 

 

word-break: keep-all

띄어쓰기 되어있는 부분에서 줄바꿈

 

아래에서 어떤 차이인지 확인해보세요.