@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 저장소의 문서를 확인하세요.