📌 این ویژگی مشخص می‌کنه وقتی متن بزرگ‌تر از فضای عنصر باشه، چطور نمایش داده بشه.
در Tailwind از کلاس‌های truncate, overflow-ellipsis, overflow-clip استفاده می‌کنیم.

✅ کلاس‌ها

• truncate → متن یک خطی و با … کوتاه میشه (ellipsis)

• overflow-ellipsis → مشابه truncate برای متن چند خطی

• overflow-clip → متن اضافی برش داده میشه بدون نقطه

✅ مثال

<div class="w-48 border p-2 truncate mb-2">
  این یک متن خیلی طولانی است که از عرض باکس بیشتر است و کوتاه می‌شود.
</div>

<div class="w-48 border p-2 overflow-clip mb-2">
  این متن خیلی طولانی است و اضافی آن نمایش داده نمی‌شود.
</div>

📌 نکات مهم

• truncate معمولاً با w-{width} یا max-w-{width} استفاده میشه تا عرض مشخص باشه.

• می‌توانی با responsive ترکیب کنی:

  • sm:truncate md:overflow-clip → موبایل کوتاه شده با …، از تبلت به بالا برش داده می‌شود.