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줄까지만 표시
각 옵션을 사용하여 텍스트 표시 줄 수를 간편하게 제한할 수 있습니다.
