@tailwindcss/line-clamp를 사용한 멀티라인 텍스트 줄임 처리

몇 주 전에 특정 줄 수로 텍스트를 줄임 처리하는 공식 Tailwind CSS 플러그인인 @tailwindcss/line-clamp를 출시했습니다.

여러분이나 팀원이 Figma에서 신중하게 만든 아름다운 디자인을 구현한다고 상상해 보세요. 각 브레이크포인트에서 다양한 레이아웃을 완벽하게 구현했고, 여백과 타이포그래피도 완벽하게 조정했으며, 사용한 사진이 디자인에 생기를 불어넣고 있습니다.

모든 것이 완벽해 보입니다. 하지만 실제 프로덕션 콘텐츠를 연결하면 문제가 발생합니다. 아름다운 블로그 카드 그리드가 무너지기 시작합니다. 실제 글의 발췌문은 마법처럼 모두 정확히 세 줄로 이루어지지 않기 때문입니다. 이제 각 카드의 높이가 제각각이 되었습니다.

익숙한 상황인가요? 그렇다면 line-clamp 플러그인이 여러분을 구원할 것입니다.

먼저 플러그인을 설치하고 tailwind.config.js 파일에 추가합니다:

npm install @tailwindcss/line-clamp

module.exports = {
  // ...
  plugins: [
    // ...
    require('@tailwindcss/line-clamp'),
  ],
}

그런 다음 텍스트 블록에 line-clamp-{n} 유틸리티를 추가하기만 하면 n 줄로 자동으로 줄임 처리되고 말줄임표가 추가됩니다:

<p class="line-clamp-3">
  원래 디자인한 대로 편리하게 세 줄로 이루어지지 않은 블로그 글의 텍스트 블록입니다. 모바일이나 데스크톱에서 레이아웃에 따라 6줄 정도로 길어질 수 있습니다. 정말 골치 아픈 문제죠. 금요일 오후 4시 45분에 이런 문제를 처리하느라 시간을 낭비하고 싶지는 않을 겁니다. SmackDown 티켓도 있고, 쇼 시작 전에 사촌이 고등학교 다닐 때 알던 근처 마을 출신의 지역 선수가 다크 매치를 할 거라는 소문도 들었는데, 일찍 가지 않으면 놓칠 수 있습니다.
</p>

더 자세한 내용은 GitHub 저장소의 문서를 확인하세요.