제목 그대로 긴 문자열을 css로 자르는 것입니다.

(보통은 개발자가 글자수를 조절 하지만 css로 처리 할 수도 있습니다. ^^ )

1. style="text-overflow:clip;overflow:hidden" 
   style="text-overflow:ellipsis;overflow:hidden" 
   style="text-overflow:ellipsis;overflow:visible"
2. <div style="width:200; text-overflow:clip; overflow:hidden;">
       <nobr>제목이 긴 문자열로 이루어진 글을 테이블의 폭에 알맞게 잘라줍니다.</nobr>
   </div>
   <div style="width:200; text-overflow:ellipsis; overflow:hidden;">
       <nobr>제목이 긴 문자열로 이루어진 글을 테이블의 폭에 알맞게 잘라줍니다.</nobr>
   </div>
   <div style="width:200; text-overflow:ellipsis; overflow:visible;">
      <nobr>제목이 긴 문자열로 이루어진 글을 테이블의 폭에 알맞게 잘라줍니다.</nobr>
   </div>
3. <table border=1>
     <tr style="padding-top:3">
       <td height=20 style="padding-left:5"><div style="overflow:hidden; text-overflow:ellipsis; width:180;"><nobr><a href="">제목이 긴 문자열로 이루어진 글을 테이블의 폭에 알맞게 잘라줍니다.</nobr></div></td>
       <td class=s>2006.12.26</td>
     </tr> 
   </table>

// 결과화면

// IE에서는 정상작동하고 파이어폭스에서는 ellipsis를 줘도 clip처럼 됩니다.

 관련스트일 3개를 class로 추가 해 놓고 필요한 부분에 css를 적용해 주는 방법을 쓰면 편할 듯 합니다. ^^

http://blog.naver.com/kchan12/70015808241

http://blog.empas.com/sm5679/18929127

위에 두 글을 참고 했으니 원본글을 보시려면 윗 링크를 보세요