게시판 목록에서 제목항목 자동 ...로 말줄임 - text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

게시판을 만들어 줄 때 개발자들이 귀찮아 하는 것 중의 하나가 목록상에서 제목 텍스트를 폭에 딱 맞춰서 글자수를 맞추는 일이다. 게시판 뿐만 아니라 메인화면에서 공지뉴스 등에서 제한된 폭 안에 한 줄로 내용을 보여주고자 할 때 일정 폭을 넘어서면 말줄임 처리를 해주어야 하는데, 데이터 상에서 텍스트 문자의 수를 세어서 문자열을 자르면 영문과 한글의 혼용에 따라 문자열의 길이가 달라진다.

이럴 때 유용한 방법이 CSS에서 폭에 맞추어서 자동으로 텍스트의 말줄임을 해버리는 것이다.

이게 핵심이다. 물론 크로스브라우징을 위해서는 별도의 선택자를 붙혀주어야 하지만 이 포스팅의 주제는 단순히 말줄임 그 자체이니까 저 세가지만 기억하자.

그런데~ 여기에 조금더 앞서나가서, 말줄임은 말줄임대로 이루어지고, 텍스트 뒷쪽으로 "새글"아이콘이미지가 따라 붙게까시 하고 싶다면 width:auto를 주면 된다.

예시는 다음과 같다