خاصية word-wrap
آخر تحديث: 2026-09-13
word-wrap خاصية word-wrap
خاصية word-wrap في CSS هي اسم مستعار لـ overflow-wrap. تتحكم فيما إذا كانت الكلمة الطويلة أو عنوان URL قد يكسر داخليًا عندما يتجاوز عرض الحاوية. صُممت لمنع السلاسل الطويلة التي لا تكسر من الفيضان خارج الحاوية ولا تزال أداة شائعة لمعالجة فائض النص؛ وتوصي المواصفات الحديثة باستخدام overflow-wrap.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
word-wrap: normal | break-word;
⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | break-word | كلمة مفتاحية | التفاف الكلمات الطويلة (اسم مستعار لـ overflow-wrap) |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح | |||||
|---|---|---|---|---|---|
| word-wrap | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح: يفضّل word-wrap: break-word الكسر عند حدود الكلمات، ولا يكسر داخل الكلمة إلا عندما تتجاوز كلمة واحدة عرض الحاوية.
مهم: word-wrap هو الاسم المستعار التاريخي لـ overflow-wrap وكلاهما متكافئ تمامًا. يُفضَّل في المشاريع الحديثة استخدام overflow-wrap لمطابقة المواصفات.
❓ الأسئلة الشائعة
Qهل هناك أي فرق بين word-wrap وoverflow-wrap؟
Aلا فرق — كلاهما متكافئ تمامًا. كان word-wrap الاسم غير القياسي الذي نفّذته المتصفحات المبكرة؛ ثم وُحد لاحقًا وأُعيدت تسميته إلى overflow-wrap، لكن بقي word-wrap كاسم مستعار للتوافق.
Qما الفرق بين word-wrap: break-word وword-break: break-all؟
Aيحافظ word-wrap: break-word على الكلمات سليمة قدر الإمكان ولا يكسرها إلا عند الضرورة؛ بينما يفرض word-break: break-all كسرًا عند حد الحاوية بغض النظر عن سلامة الكلمة.
Qكيف أتعامل مع عناوين URL أو الكلمات الطويلة التي تفيض الحاوية؟
Aاستخدم word-wrap: break-word (أي overflow-wrap: break-word). يفضّل المتصفح الكسر عند حدود الكلمات ولا يكسر داخل الكلمة إلا عندما لا تتسع كلمة طويلة واحدة — وهو مثالي لعناوين URL والبريد وسلاسل التجزئة.