테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기

게시판이나 리스트를 보여 줄때 텍스트가 너무 길어지면 보기 흉한 경우가 있다.

이때는 대부분 ASP나 PHP를 이용해서 (스크립트를 이용해서) 잘라주고 끝에 ... 을 부쳐주는 경우가 있다.

게시판이나 메인페이지에서 공지사항을 보여 줄때 두줄이상이면 디자인이 깨져서 보기 흉하다.

이때 사용할 수 있는 것이 다음 방법입니다.

<table width="100%" style="TABLE-layout:fixed">

<tr>

<td style="width:100%;overflow:hidden;text-overflow:ellipsis;"><nobr>긴텍스트</nobr></td>

</tr>

</table>

위처럼 text-overflow 의 ellipsis 를 사용하면 되는데 이는 overflow 와 항상 같이 사용해야 하며 <nobr>을 반드시 사용해야합니다.

table 의 TABLE-layout:fixed 도 반드시 있어야 합니다.

그리고 table과 td도 각각 width를 지정해 주는것이 좋습니다.

단 이 방법은 익스플로어 6+에서만 가능합니다. -_-;

Firefox에서 사용하면 ... 은 나오지 않습니다.

문자열이 길은데 ... 으로 자르지 않고 줄을 넘기려면

<table width="100%">

<tr>

<td style="width:100%;word-break:break-all;">긴텍스트</td>

</tr>

</table>

이것도 익스플로어 6+에서만 가능합니다.