انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 115
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,605
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

تحدد خاصية text-overflow في CSS طريقة الإشارة إلى النص الذي يتجاوز المساحة المتاحة في نهاية السطر؛ فهي لا تحذف النص من المحتوى ولا تجعل العنصر يفيض بمفردها.

في أمثلة السطر الواحد نستخدمها مع white-space: nowrap لمنع التفاف السطر وoverflow: hidden لإخفاء الجزء الخارج عن حدود العنصر.

القيم المستخدمة في هذا الدرس:

  • clip: القيمة الافتراضية، وتقص الجزء الزائد بصريًا عند حدود المساحة، وقد يكون القص في منتصف حرف.
  • ellipsis: تعرض علامة الحذف (…) للدلالة على الجزء المخفي إذا كانت المساحة تكفي لها.
  • نص مخصص بين علامتي اقتباس، مثل "----"، ليحل محل الجزء المخفي في المتصفحات التي تدعمه. كلمة string تصف نوع القيمة، وليست كلمة مفتاحية تُكتب كما هي في CSS. دعم النص المخصص محدود؛ استخدم ellipsis لتوافق أوسع.

CSS text-overflow Syntax

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

HTML 
text-overflow:value;
جرّب بنفسك

CSS text-overflow Values

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

HTML 
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "----"; /* Requires custom-string support */
text-overflow: initial;
text-overflow: inherit;
جرّب بنفسك

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

القيمة clip هي القيمة الافتراضية لخاصية text-overflow. تقص النص الزائد بصريًا عند حدود مساحة المحتوى، وقد تقص جزءًا من الحرف الأخير. يبقى النص الأصلي موجودًا في العنصر؛ الإخفاء في هذا المثال ناتج عن overflow: hidden.

جرّب بنفسك

CSS text overflow clip

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

HTML 
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.

HTML 
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 نصًا مخصصًا بين علامتي اقتباس، مثل "----"، للدلالة على الجزء المخفي من النص. لا تكتب text-overflow: string؛ فهذه ليست قيمة CSS صالحة.

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

جرّب بنفسك

CSS text overflow string

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

HTML 
div
{
  white-space: nowrap; 
  width: 47px; 
  overflow: hidden;
  text-overflow: "----"; 
  border: 1px solid red;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…