تستخدم خاصية text-overflow في لغة CSS مع النصوص عندما يزيد المحتوي النصي عن حجم العنصر فتتحكم هذة الخاصية في إخفاء النصوص المٌعلقة والتي تكون غير كاملة في نهاية أطراف العنصر.

تعمل خاصية text-overflow جنباً إلي جنب مع:

white-space: nowrap.
overflow: hidden.

قيم خاصية text-overflow في لغة CSS:

clip هي القيمة الأفتراضية وهي النصوص مقصوصة ولا يمكن الوصول لها "جزء من النص مفقود".
ellipsis تظهر علامة القطع ("...") بدلاً من النص المقطوع وبه جزء مفقود.
string سوف يتم قص النص إذا لم يكن له مساحة.

CSS text-overflow Syntax

طريقة كتابة خاصية text-overflow في لغة CSS.

text-overflow:value;

جربها بنفسك

CSS text-overflow Values

قيم خاصية text-overflow في لغة CSS.

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

جربها بنفسك

</> CSS text overflow clip
خاصية text-overflow مع القيمة clip في لغة CSS

تستخدم خاصية text-overflow في لغة CSS مع القيمة clip لتكون النصوص مقصوصة ولا يمكن الوصول لها "جزء من النص مفقود" وهي القيمة الأفتراضية.

جربها بنفسك

CSS text overflow clip

خاصية text-overflow في لغة CSS مع القيمة clip.

div
{
  white-space: nowrap; 
  width: 47px; 
  overflow: hidden;
  text-overflow: clip; 
  border: 1px solid red;
}

جربها بنفسك

</> CSS text overflow ellipsis
خاصية text-overflow مع القيمة ellipsis في لغة CSS

تستخدم خاصية text-overflow في لغة CSS مع القيمة ellipsis لتظهر علامة القطع ("...") بدلاً من النص المقطوع وبه جزء مفقود.

جربها بنفسك

CSS text overflow ellipsis

خاصية text-overflow في لغة CSS مع القيمة ellipsis.

div
{
  white-space: nowrap; 
  width: 47px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid red;
}

جربها بنفسك

</> CSS text overflow string
خاصية text-overflow مع القيمة string في لغة CSS

تستخدم خاصية text-overflow في لغة CSS مع القيمة string ليتم قص النص إذا لم يكن له مساحة.

جربها بنفسك

CSS text overflow string

خاصية text-overflow في لغة CSS مع القيمة string.

div
{
  white-space: nowrap; 
  width: 47px; 
  overflow: hidden;
  text-overflow: string; 
  border: 1px solid red;
}

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Text Overflow
خاصية text-overflow في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Text Overflow CSS