HTML 긴 문자열 CSS로 자르기 - text-overflow:clip, ellipsis

style="text-overflow:clip; overflow:hidden" 

style="text-overflow:ellipsis; overflow:hidden" 

style="text-overflow:ellipsis; overflow:visible"

<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>

<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처럼 됩니다.

참고 - nowrap 과 break-all 로 테이블 안의 줄바꿈 제어