[CSS] 말줄임 표시

말줄임 표시 구현

학습 계기

: 최근에 어떤 콘텐츠에 대해서 3줄 이상이 되면 ... 말줄임을 해야하는 구현 내용이 있었다. 원래였으면 그냥 JS를 사용해서 구현을 했을 것 같은데, 순수 CSS로도 충분히 구현 가능하지 않을까 싶어서 공부를 하게 됐고, 결과적으로 훨씬 간단하게 말줄임 표시를 구현할 수 있었다.

말줄임 표시란 ?

: 심플하게 text-overflow와 관련된 기능을 생각해보자. 위와 같이 파란색 박스 안에 콘텐츠가 들어간다고 할 때, 파란색 박스 뒤에 튀어나온 글자를 ... 말줄임 표시로 파란색 박스에 들어가도록 처리하고 싶을 때, 쓰는게 말줄임 표시 UI라고 할 수 있다. 레이아웃에 맞춰서 글자가 딱 떨어지는 상황이 아닐 때 쓰면 좋다. 예를 들어, API를 통해 데이터를 받아오는데, 어떨 때는 데이터가 파란색 박스를 넘치지 않지만, 어떨 때는 넘칠 가능성이 있다면 이에 대해 대비를 해야하기 때문이다. 그럼 저 경우에, 즉, 한 줄 정도 들어가는 박스에 만약 그 내용이 width를 넘는다면 ...으로 말줄임 표시를 하동록 구현해보자. 결론적으로, 이렇게 구현하고자 하는 것이다. 위와 같이 구현하려면 일단 핵심은

• width가 정해져 있어야 한다. 그래야 넘친다는 개념이 생기고, 그 넘치는 것을 ...으로 축약하는 단계로 넘어갈 수 있다.
• 넘치는 부분을 ...으로 가릴려면 먼저 overflow: hidden 으로 넘치는 부분을 안보이게 한다.
• 그리고 그 넘친 부분을 ellipsis 즉, 생략 부호 이번 경우에는 ...으로 처리하면 된다.

<div class='ipsum'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

.ipsum {
  width: 150px;
  white-space: nowrap;
  background-color: blue;
  overflow: hidden;
  text-overflow: ellipsis;
}

위와 같이 구현할 수 있다.

여러 줄의 내용을 CSS 만으로 생략 표시로 구현하려면?

: 위의 케이스의 경우 구현은 간단하지만, 유저들에게 한줄 밖에 보여줄 수 없다는 한계가 있다. 일단 줄이 넘어가려면 white-space: nowrap 을 쓰지않고 wrap을 써야하는데, 그러면 이렇게 된다. 즉, ellipsis가 먹지 않는다.

.ipsum {
  width: 150px;
  height: 50px;
  white-space: wrap;
  background-color: blue;
  overflow: hidden;
  text-overflow: ellipsis;
}

: 그러면 여러 줄의 내용을 CSS 만으로 생략 표시로 구현하려면? 이건 어떻게 구현할 수 있을까?. 일단 IE를 대응 안한다는 관점에서 다음의 속성들을 이용해서 구현할 수 있다.

display: -webkit-box
-webkit-box-clamp: N(Number = 제한하려고 하는 라인의 수) 
-webkit-box-orient: vertical(webkit box item의 정렬 방향으로 이 경우에는 문장들을 아래로 늘어뜨릴 것이기 때문에 vertical을 쓴다.)

이렇게 3개의 속성을 앞서 구현했던 속성에 추가해주면 원하는대로 구현이 가능하다.

<div class='ipsum'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

.ipsum {
  width: 150px;
  background-color: blue;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

위의 속성들을 이용해서 이렇게 세줄에서 ... 생략 표시를 하는 기능을 구현할 수 있다. 이 때, white-space: no-wrap 속성은 꼭 제거해야한다.

display: -webkit-box 속성은 해당 영역을 box 형태로 관리되도록 합니다.
-webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인수를 결정합니다.
-webkit-box-orient: vertical 속성은 영역 박스의 내의 정렬을 수직으로 하도록 합니다.