CSS

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

سوف تتعلم في هذا الدرس تنسيق النصوص في لغة CSS عن طريق مجموعة خصائص مثل [text-overflow,word-wrap,word-break,writing-mode].

التاريخ

29 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

807

المواضيع

24
الشروحات chevron_left CSS Text Overflow chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

تستخدم خاصية 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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات