📌 این ویژگی مشخص می‌کنه که فاصله بین کلمات و رفتار شکست خطوط متن چگونه باشه.
در Tailwind از کلاس‌های whitespace-* استفاده می‌کنیم.

✅ کلاس‌ها

• whitespace-normal → رفتار پیش‌فرض: متن شکست می‌خورد و فضای اضافی حذف می‌شود

• whitespace-nowrap → متن در یک خط باقی می‌ماند و شکست نمی‌خورد

• whitespace-pre → متن با تمام فاصله‌ها و خطوطی که در HTML هستند نمایش داده می‌شود

• whitespace-pre-line → متن شکسته می‌شود اما فاصله‌های اضافی حذف می‌شود

• whitespace-pre-wrap → متن شکسته می‌شود و فاصله‌ها حفظ می‌شوند

✅ مثال

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

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

<div class="w-48 border p-2 whitespace-pre mb-2">
  این یک متن
      با فاصله‌ها و خط‌های
  موجود در HTML نمایش داده می‌شود.
</div>

<div class="w-48 border p-2 whitespace-pre-line mb-2">
  این یک متن
      با خطوط جدید
  اما فاصله‌های اضافی حذف می‌شوند.
</div>

<div class="w-48 border p-2 whitespace-pre-wrap mb-2">
  این یک متن
      با خطوط جدید
  و فاصله‌ها حفظ می‌شوند.
</div>

📌 نکات مهم

• این کلاس‌ها بیشتر روی متون طولانی یا محتوای کد/پیش‌فرمتی کاربرد دارند.

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

  • sm:whitespace-nowrap md:whitespace-pre-wrap