الخاصية text-overflow

من موسوعة حسوب
< CSS
مراجعة 06:12، 16 يناير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

الخاصية text-overflow في CSS تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه U+2026)، أو عرض سلسلة نصية خاصة.

/* الكلمات المحجوزة */
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;
القيمة الابتدائية clip
تُطبَّق على الحاويات الكتلية (block container elements).
قابلة للوراثة لا
قابلة للحركة لا
القيمة المحسوبة كما حُدِّدَت.

أمثلة

مثال عن استخدام الخاصية 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>;

مصادر ومواصفات