CSS text-overflow 속성

CSS text-overflow 속성

한줄에 모든 글자가 표시 안될때 "..." 으로 치환해서 표시하는 방법에 대해서 알아보자.

<style type="text/css">

#title1 { width:200px;height:auto;border:1px solid #000000;

white-space:nowrap;text-overflow:clip;overflow:hidden; }

#title2 { width:200px;height:auto;border:1px solid #000000;

white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }

</style>

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

<br />

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

white-space:nowrap; 과 overflow:hidden; 을 함께 넣어줘야 한다.

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

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