عرض مصدر CSS/text-overflow

<noinclude>{{DISPLAYTITLE:الخاصية <code>text-overflow</code>}}</noinclude>
الخاصية <code>text-overflow</code> في CSS تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه <code>U+2026</code>)، أو عرض سلسلة نصية خاصة.<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>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>clip</code>
|-
! scope="row" |تُطبَّق على
|الحاويات الكتلية (block container elements).
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للحركة
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}

== أمثلة ==
مثال عن استخدام الخاصية <code>text-overflow</code> مع القيمة <code>clip</code> و <code>ellipsis</code>:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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; }
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|7.0
|6.0
|11.0
|1.3
|-
!استخدام السلاسل النصية
|غير مدعومة
|9.0
|غير مدعومة
|غير مدعومة
|غير مدعومة
|}
== البنية العامة ==
الخاصية <code>text-overflow</code> تقبل قيمةً واحدةً من القيم التالية.

=== القيمة <code>clip</code> ===
هذه هي القيمة الافتراضية لهذه الخاصية، والتي ستؤدي إلى اقتصاص النص مكان تجاوزه لصندوق المحتوى.
=== القيمة <code>ellipsis</code> ===
ستؤدي هذه الكلمة المحجوزة إلى عرض ثلاث نقط (المحرف … رمزه <code>U+2026</code>) لتمثيل النص الذي تم اقتصاصه. وستُعرَض هذه النقط داخل صندوق المحتوى مما يؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض النقط.
=== القيمة <code><string></code> ===
تُستخدَم السلسلة النصية المُحدَّدة لتمثيل النص الذي تم اقتصاصه، وستُعرَض هذه السلسلة النصية داخل صندوق المحتوى، وقد تؤدي إلى تقليل كمية النص المعروض إذا لم تكن هنالك مساحة كافية لعرض السلسلة النصية.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
text-overflow: clip | ellipsis | <string>;

</syntaxhighlight>
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-ui-4/#text-overflow CSS Basic User Interface Module Level 4]. أضافت دعم السلاسل النصية، والدالة <code>fade()‎</code> والكلمة المحجوزة <code>fade</code>. 
* مواصفة [https://drafts.csswg.org/css-ui-3/#text-overflow CSS Basic User Interface Module Level 3].   
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS User Interface]]