📌 این ویژگی مشخص می‌کنه که متن چگونه در خطوط متعدد شکسته یا نپیچد.
در Tailwind از کلاس‌های break-normal, break-words, break-all, truncate استفاده می‌کنیم.

✅ کلاس‌ها

• break-normal → متن طبق رفتار پیش‌فرض مرورگر می‌شکنه

• break-words → متن طولانی وقتی به انتهای باکس رسید، در کلمه می‌شکنه

• break-all → متن طولانی حتی وسط کلمات هم شکسته میشه

• truncate → متن یک خطی و اضافی آن با … کوتاه میشه

✅ مثال

<div class="w-48 border p-2 break-normal mb-2">
  این یک متن طولانی است که طبق رفتار پیش‌فرض مرورگر شکسته می‌شود.
</div>

<div class="w-48 border p-2 break-words mb-2">
  اینمتنعجیببلنداستکهبدونفاصلهبایدشکستهشود.
</div>

<div class="w-48 border p-2 break-all mb-2">
  اینمتنعجیببلنداستکهبدونفاصلهبایدشکستهشود.
</div>

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

📌 نکات مهم

• break-words مناسب متون طولانی بدون فاصله (مانند URL یا رشته‌های کد)

• break-all برای مواقعی که متن واقعاً خیلی طولانیه و باید هر جایی شکسته بشه

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

  • sm:break-words md:break-all