CSS/text-overflow

الخاصية 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>;

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

• مسودة CSS Basic User Interface Module Level 4. أضافت دعم السلاسل النصية، والدالة fade()‎ والكلمة المحجوزة fade.
• مواصفة CSS Basic User Interface Module Level 3.