CSS word-wrap 이해하기

어떤 영역을 설정해주었을 때, 텍스트는 띄어쓰기 공백을 기준으로 줄 바꿈을 하게 된다. 이는 바꿔 말하면 띄어쓰기가 되어 있지 않은 텍스트는 영역을 벗어날 수 있다는 말이 된다.

띄어쓰기가 없는 텍스트의 대표적인 경우가 바로 링크를 입력할 때이다.

그림1

그림2

word-wrap 이라는 코드를 이용하면, <그림1>이나 <그림2> 에서처럼 공백없는 텍스트가 영역을 벗어나는 문제를 해결할 수 있다.

 word-wrap: normal;  

노멀은 기본(default)값이다. 노멀로 설정하면 텍스트는 공백을 기준으로 줄 바꿈을 하게 된다.

 word-wrap: break-word;  

break-word를 값으로 주게되면, 텍스트는 띄어쓰기와 관계없이 줄바꿈을 하게 된다.