tailwind line-clamp 텍스트 줄 수 제한

Tailwind CSS에서 truncate와 line-clamp는 텍스트의 길이를 제한하거나 다루는 데 사용되는 두 가지 클래스입니다. 그러나 이 두 클래스는 사용 목적과 동작 면에서 다소 차이가 있습니다.

1. truncate 클래스:
   • truncate 클래스는 주로 한 줄의 텍스트를 표시하고, 넘치는 텍스트를 생략하고 텍스트의 끝 부분에 ... (마침표)를 추가하는 데 사용됩니다.
   • 주로 테이블 셀, 리스트 아이템, 레이블, 또는 다른 곳에서 텍스트를 한 줄로 표시할 때 유용합니다.
   • 예를 들어, truncate 클래스를 사용하면 "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."과 같은 긴 텍스트를 "Lorem ipsum dolor sit amet, consectetur..."와 같이 자르고 생략 기호를 추가할 수 있습니다.

<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>

2. line-clamp 클래스:
   • line-clamp 클래스는 다중 줄의 텍스트를 처리하고 지정된 줄 수 이상의 텍스트를 자르는 데 사용됩니다.
   • 이 클래스는 주로 텍스트 블록 또는 컨테이너 내에서 원하는 줄 수로 텍스트를 제한하고 높이 제한을 유지하면서 더 많은 줄을 표시하지 않도록 할 때 유용합니다.
   • 예를 들어, line-clamp-2 클래스를 사용하면 텍스트가 2줄로 제한됩니다.

<div class="line-clamp-2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

요약하면, truncate 클래스는 주로 한 줄의 텍스트를 다루고 생략 기호를 추가하는 데 사용되며, line-clamp 클래스는 다중 줄의 텍스트를 지정된 줄 수로 제한하는 데 사용됩니다.