في هذا الدرس 4تصفّح المواضيع
تحدد خاصية text-overflow في CSS طريقة الإشارة إلى النص الذي يتجاوز المساحة المتاحة في نهاية السطر؛ فهي لا تحذف النص من المحتوى ولا تجعل العنصر يفيض بمفردها.
في أمثلة السطر الواحد نستخدمها مع white-space: nowrap لمنع التفاف السطر وoverflow: hidden لإخفاء الجزء الخارج عن حدود العنصر.
القيم المستخدمة في هذا الدرس:
clip: القيمة الافتراضية، وتقص الجزء الزائد بصريًا عند حدود المساحة، وقد يكون القص في منتصف حرف.ellipsis: تعرض علامة الحذف (…) للدلالة على الجزء المخفي إذا كانت المساحة تكفي لها.- نص مخصص بين علامتي اقتباس، مثل
"----"، ليحل محل الجزء المخفي في المتصفحات التي تدعمه. كلمةstringتصف نوع القيمة، وليست كلمة مفتاحية تُكتب كما هي في CSS. دعم النص المخصص محدود؛ استخدمellipsisلتوافق أوسع.
CSS text-overflow Syntax
طريقة كتابة خاصية text-overflow في لغة CSS.
CSS text-overflow Values
قيم خاصية text-overflow في لغة CSS.
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "----"; /* Requires custom-string support */
text-overflow: initial;
text-overflow: inherit;القيمة clip هي القيمة الافتراضية لخاصية text-overflow. تقص النص الزائد بصريًا عند حدود مساحة المحتوى، وقد تقص جزءًا من الحرف الأخير. يبقى النص الأصلي موجودًا في العنصر؛ الإخفاء في هذا المثال ناتج عن overflow: hidden.
CSS text overflow clip
خاصية text-overflow في لغة CSS مع القيمة clip.
div
{
white-space: nowrap;
width: 47px;
overflow: hidden;
text-overflow: clip;
border: 1px solid red;
}تستخدم خاصية 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;
}يمكن أن تكون قيمة text-overflow نصًا مخصصًا بين علامتي اقتباس، مثل "----"، للدلالة على الجزء المخفي من النص. لا تكتب text-overflow: string؛ فهذه ليست قيمة CSS صالحة.
دعم النص المخصص محدود بين المتصفحات. إذا تجاهل المتصفح التصريح، فستبقى القيمة الافتراضية clip وقد لا تظهر الشرطات؛ لذلك اختلاف النتيجة هنا لا يعني أن النص تغيّر. استخدم ellipsis عندما تحتاج توافقًا أوسع.
CSS text overflow string
خاصية text-overflow في لغة CSS مع القيمة string.
div
{
white-space: nowrap;
width: 47px;
overflow: hidden;
text-overflow: "----";
border: 1px solid red;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.