[css] word-break 사용 단어별 줄바꾸기

html에서 가로 길이보다 더 많은 텍스트를 입력 하게 될때 글자 하나 하나 줄바꿈이 되지만

 

word-break를 사용하면 단어별로 줄바꿈이 된다.

 

구조

.box{word-break:keep-all;}

box라는 클래스를 가진 문장에 적용 한 것입니다.

 

 

예시

적용 안했을때

.box{width:100px;border:1px solid #000;}

<p class="box">
	동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세
</p>

적용 했을때

.box{width:100px;border:1px solid #000;word-break:keep-all;}

적용했을때는 단어별로 줄바꿈이 됨을 볼 수 있다.