دليل CSS

قواعد CSS (RULES)

كامل مواصفات CSS

خصائص text-shadow CSS3 خصائص text-justify CSS3

استخدام خاصية text-overflow في CSS3 و أمثلة

يحدد خاصية text-overflow CSS عندما يخرج محتوى حاوية النص إلى الحاوية المرئية (بدلاً من المرئية)overflowكيفية عرض محتوى النص عند استخدام عنصر الحاوية الكتلة.

الجدول أدناه يوضح استخدام هذه الخاصية و سجله التاريخي بالإضافة إلى لغة استخدام الخاصية في سكربتات JavaScript.

القيمة الافتراضية:	clip
مناسب ل:	عنصر الحاوية الكتلة
الوراثة:	لا يوجد
يمكن تفعيل الرسم البياني:	لايرجى الرجوع إلى خصائص الرسم البياني。
الإصدار:	نقطة قوة CSS3
قواعد JavaScript:	object.style.textOverflow="ellipsis"

ملاحظة:عندما يتم تعيين عنصر إلى مساحة فارغة أو كلمة واحدة طويلة جدًا بحيث لا يمكن احتواءها، قد يخرج النص، مما يؤدي إلى تدفق النص.

استخدام نموذج text-overflow

نموذج هذه الخاصية هو:

text-overflow:　clip　|　ellipsis　|　string　|　initial　|　inherit

في المثال أدناه، يتم عرض كيفية استخدام خاصية text-overflow.

مثال

　　p　{
　overflow:　hidden;
　white-space:　nowrap;
　　　text-overflow:　ellipsis;
　　}

اختبار لـ‹/›

قيمة الخاصية

يصف الجدول أدناه قيم هذه الخاصية.

القيمة	وصف
clip	يتم قطع النص الذي يناسب محتوى النص. قد يتم تكسير الأحرف.
ellipsis	استخدم رمز النقاط الثلاث ('...') لتمثيل النص المقطوع.
string	استخدم هذا النص لتمثيل النص المقطوع. يتم عرض هذا النص في منطقة المحتوى، مما يقلل من حجم النص المعرض. إذا لم يكن هناك مساحة كافية لعرض النص، سيتم قطعه.
initial	أعد هذا الخصائص إلى قيمته الافتراضية.
inherit	إذا تم تحديد، فإن العنصر المرتبط يستخدم نفس قيمة text-overflow الخاص بالعنصر الأب.

تطابق المتصفحات

تطابق متصفحات text-overflow للخصائص، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية؛ يدعم جميع المتصفحات الرئيسية هذه الخاصية.

	Firefox 7+ Google Chrome1+ Internet Explorer 6+ Apple Safari 1+ Opera 9+

ملاحظة: Internet Explorer يدعم نسخة prefix text-overflow كاسم مستعار ل -ms-text-overflow. يدعم Opera 9 و 10 نسخة prefix -o-text-overflow.

قراءة المزيد

يرجى الرجوع إلى الدروس المتعلقة بما يلي:CSS OverflowوCSS Text。

خصائص متعلقة بالنص:letter-spacing،text-align،text-decoration،text-indent،text-shadow،text-transform،white-space،word-spacing。

خصائص text-shadow CSS3 خصائص text-justify CSS3