Tailwind CSS에서 line-clamp로 텍스트 줄 수 제한하기

line-clamp 유틸리티는 Tailwind CSS에서 텍스트의 표시 줄 수를 제한할 때 유용합니다. 이를 통해 긴 텍스트가 일정 줄 수 이상 넘지 않도록 하고, 나머지는 줄임표(...)로 표시할 수 있습니다.

 

1. line-clamp 유틸리티 활성화

Tailwind CSS에서 line-clamp는 기본적으로 활성화되지 않을 수 있으므로, 필요한 경우 공식 플러그인을 설치하여 사용할 수 있습니다.

# Tailwind CSS Line Clamp 플러그인 설치
npm install -D @tailwindcss/line-clamp

설치 후, tailwind.config.js 파일에 플러그인을 추가합니다.

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/line-clamp'),
    // 기타 플러그인
  ],
};

2. line-clamp 클래스 사용하기

플러그인을 설정한 후, 특정 요소에 line-clamp 유틸리티를 적용하여 표시할 줄 수를 제한할 수 있습니다. 예를 들어, 텍스트를 3줄까지만 표시하고 싶다면 line-clamp-3 클래스를 사용합니다.

<div class="line-clamp-3">
  긴 텍스트가 들어가는 영역입니다. 줄 수를 제한하여 텍스트가 지정된 줄을 넘지 않도록 하고 나머지 텍스트는 줄임표로 표시합니다.
</div>

텍스트가 3줄까지만 표시되며, 나머지 내용은 ...로 표시됩니다.

3. line-clamp 유틸리티의 다양한 옵션

• line-clamp-1 - 1줄까지만 표시

• line-clamp-2 - 2줄까지만 표시

• line-clamp-3 - 3줄까지만 표시

• line-clamp-n - n줄까지만 표시

각 옵션을 사용하여 텍스트 표시 줄 수를 간편하게 제한할 수 있습니다.