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>

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