در Tailwind CSS می‌تونی با Line Clamp تعداد خطوط یک متن رو محدود کنی، بقیه متن هم به صورت … (ellipsis) مخفی میشه. این قابلیت در واقع یه پلاگینه و از @tailwindcss/line-clamp میاد.

📌 نصب و فعال‌سازی Line Clamp

اول باید پلاگین رو نصب کنی:

npm install @tailwindcss/line-clamp

بعد توی tailwind.config.js اضافه‌اش کن:

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

📌 کلاس‌های آماده Line Clamp

📌 مثال

<div class="w-80 bg-gray-100 p-4">
  <p class="line-clamp-2">
    Tailwind CSS یک فریم‌ورک قدرتمند برای طراحی رابط کاربری است. 
    با استفاده از Utility-First بودن آن، شما می‌توانید خیلی سریع و راحت استایل‌های مورد نیاز خود را بسازید.
  </p>
</div>

🔹 در این مثال، متن فقط توی ۲ خط نشون داده میشه و بقیه با … مخفی میشه.

🎯 نکات مهم

• این ویژگی از display: -webkit-box; و -webkit-line-clamp استفاده می‌کنه.

• روی مرورگرهایی که پشتیبانی کامل ندارن (مثل خیلی قدیمی‌ها) ممکنه جواب نده.

• اگه می‌خوای متن کاملاً بریده نشه و فقط ellipsis (...) آخر خط بیاد، می‌تونی از truncate یا text-ellipsis استفاده کنی.