CSS Text Overflow
خاصية text-overflow في لغة CSS
سوف تتعلم في هذا الدرس تنسيق النصوص في لغة CSS عن طريق مجموعة خصائص مثل [text-overflow,word-wrap,word-break,writing-mode].
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
