خاصية text-overflow
آخر تحديث: 2026-09-13
text-overflow خاصية text-overflow
تتحكم خاصية text-overflow في CSS في كيفية عرض النص عندما يفيض حاويته. وأكثر استخداماتها شيوعًا، مقترنة بـ overflow: hidden وwhite-space: nowrap، هو عرض النص المتجاوز في سطر واحد بعلامة حذف. تدعم وضعين: clip (قص) وellipsis (…)، مما يجعلها أداة قياسية للتعامل مع النصوص الطويلة في تصميم الواجهات.
| الفئة | |
|---|---|
| القيمة الأولية | clip |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
text-overflow: [ clip | ellipsis | <string> ]{1,2};⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
clip | ellipsis | كلمة مفتاحية | معالجة الفائض: clip أو ellipsis |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-overflow | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
مهم： لا يعمل text-overflow إلا مع overflow: hidden (أو scroll/auto) وwhite-space: nowrap؛ ولن يكون له أي تأثير إذا عُيّن بمفرده.
تلميح： تتطلب علامة الحذف متعددة الأسطر -webkit-line-clamp مقترنًا بـ display: -webkit-box و-webkit-box-orient: vertical، وهي خصائص خاصة بـ WebKit.
❓ الأسئلة الشائعة
Qلماذا لا تعرض خاصية text-overflow علامة الحذف في CSS؟
Aتحقق من أن overflow: hidden وwhite-space: nowrap كلاهما مضبوطان وأن الحاوية لها حد عرض محدد. غياب أي من هذه الشروط يمنع تشغيل علامة الحذف عند الفائض.
Qكيف أضيف علامة حذف إلى نص مقطوع متعدد الأسطر باستخدام CSS؟
Aيدعم CSS القياسي فقط علامة الحذف ذات السطر الواحد. للأسطر المتعددة، استخدم -webkit-line-clamp للحد من عدد الأسطر مقترنًا بـ display: -webkit-box وoverflow: hidden؛ وكل المتصفحات الرئيسية تدعم ذلك اليوم.
Qكيف أكتب علامة حذف لنص ذي سطر واحد باستخدام خاصية text-overflow؟
Aيجب أن تعمل ثلاث خصائص معًا: white-space: nowrap لمنع الالتفاف، وoverflow: hidden لإخفاء الفائض، وtext-overflow: ellipsis لإظهار علامة الحذف. ويجب أن يكون للحاوية عرض ثابت أو مقيد — هذه الشروط الثلاثة جميعها ضرورية.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
خاصية white-space
تتحكم في معالجة المسافات البيضاء والالتفاف.
خاصية overflow
تتحكم في كيفية معالجة المحتوى الفائض.
