📌 این ویژگی مشخص می‌کنه که وقتی یک کلمه یا رشته طولانی از محدوده باکس خارج می‌شود، چطور شکسته شود.
در Tailwind از کلاس‌های break-normal, break-words, break-all استفاده می‌کنیم.

✅ کلاس‌ها

• break-normal → رفتار پیش‌فرض مرورگر

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

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

✅ مثال

<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>

📌 نکات مهم

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

• break-all وقتی استفاده می‌شود که می‌خوای حتی وسط کلمات متن شکسته شود.

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

  • sm:break-words md:break-all