التفاف النص الذكي text-wrap / text-balance / text-pretty

الصياغة

class="text-balance"  /* توازن الأسطر — للعناوين */
class="text-pretty"   /* منع الكلمة اليتيمة — للفقرات */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<script src="https://cdn.tailwindcss.com"></script>
<div class="max-w-xs space-y-4 p-4">
  <h2 class="text-balance text-2xl font-bold">عنوان طويل نسبيًّا يتوزّع بتوازن جميل على الأسطر</h2>
  <p class="text-pretty text-gray-600">فقرة تتجنّب ترك كلمة صغيرة يتيمة في آخر سطر منفردة.</p>
</div>

أهم القيم

💡 نصائح عملية

• استخدم text-balance للعناوين وtext-pretty للفقرات — كلّ أداة صُمّمت لحالة مختلفة
• لا حاجة لأي جافاسكربت أو حسابات يدوية لعدد الكلمات — الأداة CSS خالص

⚠️ أخطاء شائعة

• استخدام text-balance على فقرة طويلة جدًّا (أكثر من ست أسطر تقريبًا) — الأداء يتراجع ولا فائدة بصرية واضحة
• توقّع أن text-pretty يوازن كل الأسطر مثل text-balance — دورها أضيق: منع الكلمة اليتيمة فقط

خصائص ذات صلة