CSS에서 ellipsis('...')를 처리하는 방법

이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '...'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다.

한줄라인 글자수 제한

한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다.

 <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div>

 .txt_line {
      width:70px;
      padding:0 5px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
  }

• Block레벨 테그에서만 적용됨.
• overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함
• text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
• white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)

멀티라인 글자수 제한

멀티라인에 대해서 글자수를 제한하는 방법은 아래와 같습니다.

<p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다.&nbsp;  비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다.  이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p>

 .txt_post {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    line-height: 1.2em;
    height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
  }

SASS를 사용한다면 아래와 같이 @mixin으로 등록해 놓고 불러와서 사용 하면 됩니다.

// 멀티라인 말줄임 표시
// $line-cnt : 라인 수
// $line-height : line-height값
// 사용법 : @include ellipsis(3, 1.6em);
@mixin ellipsis($line-cnt, $line-height) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line-cnt; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    line-height: $line-height;
    height: $line-height * $line-cnt; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}

.ellipsis-3 {
    @include ellipsis(3, 1.3em); 
}