텍스트 트렁케이팅

박스의 높이를 제한해 두면, 내부 콘텐츠가 많아질수록 넘침(overflow)은 피할 수 없다. 이를 가장 단순하게 해결하는 방법은 overflow: hidden을 사용하는 것이다. 그러나 이 방식은 시각적으로 어색한 문제가 있다. 텍스트가 중간에서 뚝 잘린 듯한 인상을 주고, 사용자는 해당 영역에 추가 텍스트가 존재하는지조차 인지할 수 없다.

이러한 문제를 해결하기 위해 사용하는 기법이 텍스트 트렁케이팅(text truncating)이다. 트렁케이팅은 제한된 공간을 초과한 텍스트를 숨기되, 말줄임표(..., ellipsis)를 통해 더 많은 내용이 존재한다는 힌트를 제공한다. 이는 단순한 레이아웃 제어를 넘어, 사용자 경험 측면에서도 의미 있는 선택이다.

단일 줄 텍스트 트렁케이팅

단일 줄 텍스트의 경우 CSS만으로 비교적 간단하게 처리할 수 있다. 핵심은 텍스트를 한 줄로 고정하고, 넘치는 영역을 숨긴 뒤, 말줄임표를 적용하는 것이다.

.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: nowrap은 텍스트가 줄바꿈되지 않도록 강제한다. 이 상태에서 overflow: hidden을 적용하면 컨테이너를 초과한 텍스트가 보이지 않게 된다. 마지막으로 text-overflow: ellipsis를 사용하면, 잘린 지점에 말줄임표가 표시된다.

이 방식은 카드 제목, 리스트 아이템, 테이블 셀 등 한 줄로 표현되어야 하는 UI 요소에 적합하다.

다중 줄 텍스트 트렁케이팅

문단 형태의 텍스트처럼 여러 줄을 허용하면서도 일정 줄 수까지만 표시하고 싶은 경우가 있다. 이때는 -webkit-line-clamp를 활용한다. 이 속성은 지정한 줄 수를 초과하는 텍스트를 잘라내고 말줄임표를 표시한다.

.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

display: -webkit-box와 -webkit-box-orient: vertical은 WebKit 기반의 박스 레이아웃을 활성화하기 위한 설정이다. -webkit-line-clamp에 숫자를 지정하면 최대 표시 줄 수가 결정된다. 예제에서는 최대 3줄까지만 표시된다.

이 방식은 카드 본문, 게시글 요약, 상품 설명 등 다중 줄 텍스트가 필요한 UI에서 자주 사용된다. 참고로, -webkit-line-clamp에 1을 지정하면 단일 줄 트렁케이팅 용도로도 사용할 수 있다.