div 에서 폭에 따라 텍스트 길이 조정하기

게시판이나 메인 화면의 최근게시물 등에서 text를 칸에 맞게 잘라주려면 보통 서버에서 작업을 하곤 했다.

서버에서 칸 길이에 맞게 자르고, ...을 붙여주곤 했는데 숫자나 영문, 특수기호 등 예외가 많아서 곤란할 때가 많았다.


<div style="width:200px;overflow:hidden;text-overflow:ellipsis">
<nobr>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</nobr>
</div>


위와 같이 하면, 200px 에 맞게 잘리고, ... 이 찍힌다.

overflow:hidden 이 넘어가는 영역에서 잘리게 해주고,
text-overflow:ellipsis 가 ...을 찍어준다.
<nobr> 은 이름에서 풍기다시피 줄을 넘어가지 않게 해준다.

다만 text-overflow:ellipsis 은 IE6 부터 생긴 style 로 firefox 에서는 적용되지 않는다.
그래도 overflow:hidden 은 잘 먹으니, 유용하게 쓸 수 있다.

또, td 에는 overflow 가 없으므로 테이블에서는 div로 한번 감싸 줘야한다.