CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법

2009. 2. 9. 10:35Programming/CSS


일단 핵심적인 내용을 먼저 하면

1. 문자열을 출력하는 영역에 너비(width)가 고정되어야 합니다.

2. 문자열의 넘어서는 부분을 생략(ellipsis)하고, 다른 넘어서는 부분은 안보이게(hidden) 처리합니다.


예를들어 다음과 같은 코드를 실행해보면

이해하시는데 빠를거에요 ^ ^

<table id=tb border=1 style="table-layout:fixed;">
<tr>
<td style="overflow: hidden; text-overflow:ellipsis; width:150px;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>


결과는 다음과 같이 ... 문자가 붙어 나타나죠 ^ ^



  • 프로필사진
    M2009.02.09 22:08

    text-overflow는 CSS3의 속성이라 IE6,7는 물론이고 일부 신형 브라우져에서도 안될 확률이 높네요.

  • 프로필사진
    Favicon of http://bg_ellder.blog.me/ BlogIcon bg_ellder2011.03.08 09:44

    감사 드려요~^^ 퍼가고 출처 남겼습니다..

1 2 3 4 5 6 7 8