우선 결과!!
Internet Explorer 9.0
Opera 11.52
Firefox 8.0
Safari 5.1.1
Chrome 15.0
CSS 표현
<div style="width:145px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">가나다라마바사아자차카타파하</div>
너비지정을 해 주고, 줄바꿈을 하지 않도록 해 주어야 글이 넘칠 것입니다. (물론 브라우저 가로 크기가 좁아지면 줄바꿈만 하지 않아도 되겠지만요)
그리고 넘치는 부분은 보이지 않게 해 주고, 글씨가 넘치는 부분은 점으로 처리하겠다고 적은 것입니다. 'ellipsis' 대신 'ellipsis-word'로 입력하면 단어 단위로 잘리는 것 같더군요~
덧붙여서
구 버전의 브라우저들에서는 지원하지 않을수도 있습니다.
그래서인지 구 버전 브라우저용 CSS 코드가 있는 것 같기는 하더군요~
근데 요즘 IE 빼고는 거의 최신 브라우저를 사용하는 분위기라서 다른 브라우저들은 괜찮을 것 같구요~
IE도 7~9버전 다 잘 지원되는 것 같습니다. 다만 말줄임 부분이 9 버전에서는 중간으로 올라가더군요~ (IE6은 테스트 안해봤습니다.)
