[React] 텍스트 말줄임 처리하기 (text-overflow: ellipsis)

웹에서 텍스트 길이가 컨테이너 너비를 초과할 경우, 레이아웃이 깨지거나 불필요한 스크롤이 발생하는 등 UI가 비정상적으로 보일 수 있다.
이러한 문제는 CSS의 text-overflow: ellipsis 속성을 사용하여 말줄임(...) 처리로 해결할 수 있다.

한 줄 말줄임 표시

한 줄 텍스트에서 말줄임을 적용하려면 다음 세 가지 속성이 함께 필요하다.

• overflow: hidden
• white-space: nowrap
• text-overflow: ellipsis

위 속성을 사용하면 텍스트가 한 줄로 유지되며, 컨테이너를 초과하는 부분은 ...으로 표시된다.

.review {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

여러 줄 말줄임 표시

여러 줄에서 말줄임을 적용하려면 다음 세 가지 속성을 활용하면 된다.

• display: -webkit-box
• -webkit-line-clamp
• -webkit-box-orient

.review {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 표시할 최대 줄 수 */
  -webkit-box-orient: vertical;
}

Reference

CSS ellipsis 말줄임 처리하기