text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 글자르기 width:auto. 글이 길 경우 CSS 말줄임...로 표시

게시판을 개발할 때 귀찮은 작업 중의 하나가 제목을 리스트 폭에 맞춰서 말을 줄이는 것이다.

서버 단에서 미리 길이를 계산해서 출력할 수도 있지만, 사이트 특성상 게시판의 종류가 다양하다거나 하면, 은근히 귀찮은 압박으로 다가오게 된다.

이럴 때 유용한 것이 text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 조합이다.

이걸 쓰면 글이 길 경우 CSS 말줄임...로 표시된다.

<style>

.vf_ellipsis { overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:nowrap; position:relative; float:left; }

#vf_360 { width:auto; max-width:360px; }

</style>

<td class="t_po">

<p class="vf_ellipsis" id="vf_360">

금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 -추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택

</p>

<img src="./images/icon_new.gif" alt="new" class="vm" />

</td>

이렇던 녀석이

이렇게 바뀐다.

소스에서 볼드처리 해둔 부분이 중요한 부분인데, vf_360을 id로 스타일을 적용하게 했고, width:auto; 속성을 부여했는데,

게시판들은 제목의 길이가 변하는 것에 따라서 다음 그림처럼 new 아이콘이 따라붙어야 할 때가 있다.

Width속성을 명시해버리면 new아이콘이 생뚱맞은 데에 놓이므로 float:left속성으로 제목의 글 길이가 줄어들고 늘어나는 것에 따라서 움직여주어야 하기 때문에 width:auto; 속성을 사용한다.

뿐만 아니라 멀티라인도 말 줄임이 가능하다.

    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

위와 같이 적용하면 3줄 째에서 말 줄임을 진행한다.

-webkit-line-clamp: 의 숫자를 조절하면 된다.

눈치챘겠지만 이 CSS는 웹킷 기반의 브라우저에서만 적용된다.

엣지마저 크로미움인 웹킷 기반으로 바뀐 마당이라 웬만한 브라우저에서는 먹힌다.