일단 핵심적인 내용을 먼저 하면
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>
결과는 다음과 같이 ... 문자가 붙어 나타나죠 ^ ^
이올린에 북마크하기
이올린에 추천하기'Web > CSS' 카테고리의 다른 글
| UX를 편리하게 하기 위한 7 CSS 팁 (0) | 2010/02/03 |
|---|---|
| How to set css style on disabled FORM INPUT Tag (0) | 2009/03/12 |
| CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법 (2) | 2009/02/09 |
| 버튼을 CSS로 이쁘게~ (0) | 2008/06/21 |
| IE 6에서 나타나는 배경이미지 깜빡임 현상 수정 (2) | 2008/01/28 |
| DIV를 이용해 가운데 정렬 (1) | 2008/01/24 |
이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^
Trackback : http://i-ruru.com/trackback/399
-
M 2009/02/09 22:08
text-overflow는 CSS3의 속성이라 IE6,7는 물론이고 일부 신형 브라우져에서도 안될 확률이 높네요.
Prev
