텍스트 트렁케이팅

박스 높이를 제한해놓아도 컨텐츠가 많으면 흘러넘치기 마련이다. 이를 방지하기 위해 overflow: hidden을 사용하지만, 이것만으로는 마뜩찮다. 컨텐츠가 뚝 하고 잘려버리는 느낌이 들기 때문이다. 게다가 사용자는 숨겨진 텍스트가 존재하는지도 알 길이 없다.

이럴 때 사용하는 것이 바로 텍스트 트렁케이팅(text truncating)이다. 제한된 공간에서 텍스트가 넘칠 때, 텍스트 트렁케이팅을 사용하면 넘치는 부분을 "..."(ellipsis)으로 표시할 수 있다. 이를 통해 사용자는 해당 영역에 더 많은 텍스트가 존재한다는 힌트를 얻을 수 있다.

 

단일 줄 텍스트 트렁케이팅

단일 줄에서 텍스트가 넘치는 경우 text-overflow: ellipsis를 사용해 간단히 처리할 수 있다.

.text-truncate {
  white-space: nowrap;       /* 텍스트를 한 줄로 유지 */
  overflow: hidden;          /* 넘치는 텍스트 숨기기 */
  text-overflow: ellipsis;   /* 숨겨진 텍스트를 '...'으로 표시 */
}

 

다중 줄 텍스트 트렁케이팅

다중 줄 텍스트를 제한된 영역 내에서 트렁케이팅하려면 -webkit-line-clamp를 사용한다. 원리적으로는 -webkit-line-clamp 값에 1을 주면 단일 줄 텍스트 트렁케이팅으로도 사용 가능하다.

.multiline-truncate {
  display: -webkit-box;          /* WebKit 박스 레이아웃 */
  -webkit-line-clamp: 3;         /* 최대 3줄로 제한 */
  -webkit-box-orient: vertical;  /* 세로 방향으로 정렬 */
  overflow: hidden;              /* 넘치는 내용 숨기기 */
}