CSS word-wrap 정보, 사용법 HTML

CSS word-wrap 이해하기

 

 

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

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

 

 

 

그림1

 

 

그림2

 

 

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

word-wrap: normal; 

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

word-wrap: break-word; 

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