CSS word-break 속성

CSS word-break 속성

한줄에 모든 글자가 표시 안될때 줄넘기는 방법에 대해서 알아보자.

<style type="text/css">

#title1 { width:200px;height:auto;border:1px solid #000000;word-break:keep-all; }

#title2 { width:200px;height:auto;border:1px solid #000000;word-break:break-all; }

</style>

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

<br />

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

keep-all : 단어 단위로 줄넘김을 해준다.

break-all : 한 글자 단위로 줄넘김을 해준다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세