white-space
خاصية معالجة الفراغات white-space
خاصية white-space تتحكم بمصير المسافات وكسور الأسطر: دمجها الافتراضي، حفظها الحرفي للكود، أو منع الالتفاف نهائيًا.
افتراضيًا يدمج المتصفح المسافات المتتالية بواحدة ويتجاهل أسطر المصدر — سلوك normal المناسب للنثر. القيمتان النجمتان: **nowrap** تمنع الالتفاف كليًا (شارات وأزرار يكسر منتصفها قبيح — أزرار هيدر هذا الموقع عليها)، و**pre** تحفظ كل شيء حرفيًا (سلوك وسم pre نفسه).
والحل الوسط الأنيق pre-wrap: يحفظ أسطر المصدر والمسافات لكنه يلتف عند الحاجة — مثالي لعرض نصوص المستخدمين بأسطرها كما كتبوها بلا كسر التخطيط (صناديق التقارير بهذا الموقع مثلًا).
الصياغة
.badge { white-space: nowrap; }
.user-text { white-space: pre-wrap; }⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
🎨 محرّر HTML/CSS
<style>
.badge { background: #7c5cff; color: white; padding: 6px 12px; border-radius: 99px; font-size: 13px; }
.wrap-demo { width: 190px; background: #ede9fe; padding: 8px; border-radius: 8px; margin-top: 8px; }
</style>
<div class="wrap-demo">
<span class="badge" style="white-space:nowrap">شارة لا تنكسر أبدًا</span>
</div>
<div class="wrap-demo" style="white-space:pre-wrap">سطر أول
سطر ثانٍ محفوظ
ومسافات بادئة حية — مع التفاف آمن.</div>النتيجة المباشرة:
أهم القيم
| القيمة | الوظيفة |
|---|---|
| normal | الافتراضي: دمج الفراغات والتفاف حر |
| nowrap | سطر واحد مهما طال — شارات وأزرار وخلايا حرجة |
| pre-wrap | حفظ الأسطر والمسافات مع التفاف — نصوص المستخدمين |
| pre | حفظ حرفي كامل بلا التفاف — الكود |
💡 نصائح عملية
- زر ينكسر نصفين على الجوال؟ nowrap — وتأكد أن السطر يتسع فعلًا
- تعليقات ورسائل المستخدمين: pre-wrap تعرضها كما كُتبت بأمان
⚠️ أخطاء شائعة
- nowrap على نص طويل داخل صندوق ضيق = فيضان أفقي (رفيقتها overflow)
- استبدال أسطر المستخدم بـ br يدوية بدل pre-wrap
خصائص ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs