[CSS] 스타일시트를 이용한 텍스트 Overflow 처리 (text-overflow:ellipsis)

text-overflow:ellipsis

IE6 이상에서만 지원하는 스타일로 overflow:hidden 속성과 다른 점은 텍스트가 지정한 영역을 넘칠경우 끝에 자동으로 “...“을 붙여준다는 점

사용법

<DIV style="border:#cccccc 1px solid;width:100px;height:14px;text-overflow:ellipsis">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</DIV>

주의 할 점은 해당 태그에 넓이(width)가 지정되야 하고, div와 같은 태그는 아래로 늘어 나기때문에 높이를 정해 주거나 WHITE-SPACE:NOWRAP; 속성을 사용하거나 nobr을 사용해야 한다.