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

2013.12.23 20:11 Posted by 초절정고수
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 로 테이블 안의 줄바꿈 제어