الفرق بين المراجعتين لصفحة: «CSS/text-overflow»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-overflow</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>text-overflow</code>}}</noinclude> | ||
الخاصية <code>text-overflow</code> في CSS تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه <code>U+2026</code>)، أو عرض سلسلة نصية خاصة. | الخاصية <code>text-overflow</code> في CSS تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه <code>U+2026</code>)، أو عرض سلسلة نصية خاصة. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 34: | سطر 21: | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* الكلمات المحجوزة */ | |||
text-overflow: clip; | |||
text-overflow: ellipsis; | |||
/* <string> سلسلة نصية */ | |||
text-overflow: "…"; | |||
/* القيم العامة */ | |||
text-overflow: inherit; | |||
text-overflow: initial; | |||
text-overflow: unset; | |||
</syntaxhighlight>الخاصية <code>text-overflow</code> لا تؤدي إلى خروج المحتوى من صندوقه، ولجعل المحتوى النصي يخرج عن صندوق العنصر فاستخدم خاصية <code>[[CSS/overflow|overflow]]</code> أو <code>[[CSS/white-space|white-space]]</code>، مثلًا:<syntaxhighlight lang="css"> | |||
overflow: hidden; | |||
white-space: nowrap; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 79: | سطر 83: | ||
الخاصية <code>text-overflow</code> تقبل قيمةً واحدةً من القيم التالية. | الخاصية <code>text-overflow</code> تقبل قيمةً واحدةً من القيم التالية. | ||
=== | === <code>clip</code> === | ||
هذه هي القيمة الافتراضية لهذه الخاصية، والتي ستؤدي إلى اقتصاص النص مكان تجاوزه لصندوق المحتوى. | هذه هي القيمة الافتراضية لهذه الخاصية، والتي ستؤدي إلى اقتصاص النص مكان تجاوزه لصندوق المحتوى. | ||
=== | === <code>ellipsis</code> === | ||
ستؤدي هذه الكلمة المحجوزة إلى عرض ثلاث نقط (المحرف … رمزه <code>U+2026</code>) لتمثيل النص الذي تم اقتصاصه. وستُعرَض هذه النقط داخل صندوق المحتوى مما يؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض النقط. | ستؤدي هذه الكلمة المحجوزة إلى عرض ثلاث نقط (المحرف … رمزه <code>U+2026</code>) لتمثيل النص الذي تم اقتصاصه. وستُعرَض هذه النقط داخل صندوق المحتوى مما يؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض النقط. | ||
=== | === <code><string></code> === | ||
تُستخدَم السلسلة النصية المُحدَّدة لتمثيل النص الذي تم اقتصاصه، وستُعرَض هذه السلسلة النصية داخل صندوق المحتوى، وقد تؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض السلسلة النصية. | تُستخدَم السلسلة النصية المُحدَّدة لتمثيل النص الذي تم اقتصاصه، وستُعرَض هذه السلسلة النصية داخل صندوق المحتوى، وقد تؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض السلسلة النصية. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 16:49، 29 أغسطس 2018
الخاصية text-overflow في CSS تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه U+2026)، أو عرض سلسلة نصية خاصة.
بطاقة الخاصية
| القيمة الابتدائية | clip
|
|---|---|
| تُطبَّق على | الحاويات الكتلية (block container elements). |
| قابلة للوراثة | لا |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* الكلمات المحجوزة */
text-overflow: clip;
text-overflow: ellipsis;
/* <string> سلسلة نصية */
text-overflow: "…";
/* القيم العامة */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;
الخاصية text-overflow لا تؤدي إلى خروج المحتوى من صندوقه، ولجعل المحتوى النصي يخرج عن صندوق العنصر فاستخدم خاصية overflow أو white-space، مثلًا:
overflow: hidden;
white-space: nowrap;
أمثلة
مثال عن استخدام الخاصية text-overflow مع القيمة clip و ellipsis:
<p class="overflow-visible">تجربة عن استخدام الخاصية <code>text-overflow</code> لتحديد سلوك المتصفح عند اقتصاص النص.</p>
<p class="overflow-clip">تجربة عن استخدام الخاصية <code>text-overflow</code> لتحديد سلوك المتصفح عند اقتصاص النص.</p>
<p class="overflow-ellipsis">تجربة عن استخدام الخاصية <code>text-overflow</code> لتحديد سلوك المتصفح عند اقتصاص النص.</p>
شيفرة CSS:
p {
width: 200px;
border: 1px solid;
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.overflow-visible { white-space: initial; }
.overflow-clip { text-overflow: clip; }
.overflow-ellipsis { text-overflow: ellipsis; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 7.0 | 6.0 | 11.0 | 1.3 |
| استخدام السلاسل النصية | غير مدعومة | 9.0 | غير مدعومة | غير مدعومة | غير مدعومة |
البنية العامة
الخاصية text-overflow تقبل قيمةً واحدةً من القيم التالية.
clip
هذه هي القيمة الافتراضية لهذه الخاصية، والتي ستؤدي إلى اقتصاص النص مكان تجاوزه لصندوق المحتوى.
ellipsis
ستؤدي هذه الكلمة المحجوزة إلى عرض ثلاث نقط (المحرف … رمزه U+2026) لتمثيل النص الذي تم اقتصاصه. وستُعرَض هذه النقط داخل صندوق المحتوى مما يؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض النقط.
<string>
تُستخدَم السلسلة النصية المُحدَّدة لتمثيل النص الذي تم اقتصاصه، وستُعرَض هذه السلسلة النصية داخل صندوق المحتوى، وقد تؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض السلسلة النصية.
البنية الرسمية
text-overflow: clip | ellipsis | <string>;
مصادر ومواصفات
- مسودة CSS Basic User Interface Module Level 4. أضافت دعم السلاسل النصية، والدالة
fade()والكلمة المحجوزةfade. - مواصفة CSS Basic User Interface Module Level 3.