[CSS] 텍스트 크기에 따른 자동 줄바꿈 / overflow

word-break

word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.

출처 : http://htglss.tistory.com/31

사진의 예로 

빨간 네모 안에 글이 word-break를 적용하기 전 기존에 설정된 width 값을 넘어서 단어가 표시된다.

아래의 사진은 word-break를 적용한 내용이다. 

또 한가지 컨텐츠 내 엔터, 스페이스바가 있을 경우 자동으로 word-break를 걸어주기도 한다.