표현 글자수가 길때 원하는 길이로 자르기

홈페이지를 제작하다보면 게시판의 최근글 목록을 표시해야할때가 자주 있습니다.
예전엔 글자수를 세어서 하는 방법을 이용했지만 많은 단점이 있었습니다. 한글, 영어, 특수문자 등을 볼때 한 글자의 가로폭이 서로 같지않다는 단점이 있기에 글자수를 세어서 하는 방법은 별로 문제의 해결을 가져다 주지 못했습니다.

제가 사용하는 방법 2가지가 있는데 알려드리도록 하지요..


1번 방법

<div style="width:100; height:18; overflow:hidden;"><NOBR>가나다 라마바 사아자 차카타 파하</NOBR></div><br>
<div style="width:100; height:18; overflow:hidden;"><NOBR>123 456 789 012 345 678 90</NOBR></div><br>
<div style="width:100; height:18; overflow:hidden;"><NOBR>ABC DEF GHI JKL MNO PQR STU VWX YZ</NOBR></div><br>
<div style="width:100; height:18; overflow:hidden;"><NOBR>abc def ghi jkl mno pqr stu vwx yz</NOBR></div><br>

가로 100 픽셀 까지는 글자를 표시해주고 남는 글자는 아랫줄에 줄넘김으로 표시하는 방법인데요.. 그 나머지는 세로 18 픽셀에 넘어가므로 화면상에는 보이지 않게 처리하는 방법입니다.
STYLE 부분은 CLASS 로 정의해서 사용하면 편리하겠지요


2번 방법

<table border="0" cellpadding="0" cellspacing="0" width="200" style='table-layout:fixed;'>
<tr>
<td nowrap>가나다라 마바사 아자차카 타파하 가나다라 마바사 아자차카 타파하</td>
</tr>
</table>

이 방법은 좀더 간단한 방법으로 제로보드 홈페이지를 보고 찾았습니다.
이런식으로 처리하면 가로 200 픽셀 까지만 글자보여주고 나머지는 보여주지 않습니다.


<TD> 태그를 하나 이상 더 추가해야 될 경우는 아래처럼 하시면 문제가 해결됩니다.


<table border="0" cellpadding="0" cellspacing="0" width="200" style='table-layout:fixed;'>
<tr>
<td nowrap>가나다라 마바사 아자차카 타파하 가나다라 마바사 아자차카 타파하</td>
<td align="right" width="30">11/20</td>
</tr>
</table>

짧은 쪽의 width 값을 줌으로 나머지 값은 긴쪽이 다 사용하라는 경우가 되지요...