text-overflow:ellipsis 속성 (제목이 길 경우 … 으로 표시)

IE6,7 IE8,9 Chrome Safari FireFox Opera
text-overflow:ellipsis O O O O

O

(Ver. 7 부터 지원)

 O


말줄임표 정렬 위치 (서체별)

IE6,7 IE8,9 Chrome Safari FireFox Opera
굴림,Gulim 하단 중앙 중앙 중앙 중앙 하단
돋움,Dotum 하단 중앙 중앙 중앙 중앙 하단
궁서,Gungsuh 하단 중앙 중앙 중앙 중앙 하단
고딕 하단 중앙 중앙 하단 중앙 하단
Gothic 하단 하단 중앙 하단 중앙 하단
맑은 고딕,Malgun Gothic 하단 하단 하단 하단 하단 하단
Sans-serif 하단 하단 중앙 하단 중앙 하단
Arial 하단 하단 하단 하단 하단 하단
Verdana 하단 하단 하단 하단 하단

하단

IE6,IE7, Opera / iE8,IE9 / Chrome, Firefox 이렇게 동일하게 보여졌습니다.

IE8에서 고딕체 국문과 영문은 각각 다르게 보여졌습니다.

 

적용시, 참고사항

고정된 width 값일 경우에만 이 속성을 적용할 수 있다.

white-space:nowrap / overflow:hidden 속성도 꼭 필요하다.

div {
 width:200px;
 height:20px;
 text-overflow:ellipsis;
 overflow:hidden;
 white-space:nowrap;
}