عرض مصدر CSS/overflow

<noinclude>{{DISPLAYTITLE:الخاصية <code>overflow</code>}}</noinclude>
الخاصية <code>overflow</code> في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي عند تجاوزه أبعاد الحاوية الكتلية التي هو فيها.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>visible</code>
|-
! scope="row" |تُطبَّق على
|عناصر <code>block-level</code> و <code>inline-block</code> غير المُستبدَلة (non-replaced).
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}<syntaxhighlight lang="css">
/* لن يتم اقتصاص المحتوى */
overflow: visible;

/* سيتم اقتصاص المحتوى دون عرض شريط تمرير */
overflow: hidden;

/* سيتم اقتصاص المحتوى مع عرض شريط تمرير */
overflow: scroll;

/* ترك الأمر بيد المتصفح */
overflow: auto;

/* القيم العامة */
overflow: inherit;
overflow: initial;
overflow: unset;

</syntaxhighlight>

== أمثلة ==
هذا مثال عن القيمة الافتراضية <code>visible</code> التي تؤدي إلى عرض ما يزيد من المحتوى على جوانب العنصر:<syntaxhighlight lang="html">
<p>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: visible;
}
</syntaxhighlight>مثال عن القيمة <code>hidden</code> التي ستؤدي إلى اقتصاص المحتوى الزائد:<syntaxhighlight lang="css">
p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: hidden;
}

</syntaxhighlight>مثال عن القيمة <code>scroll</code> التي تؤدي إلى إظهار أشرطة التمرير دومًا:<syntaxhighlight lang="css">
p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: scroll;
}

</syntaxhighlight>مثال عن القيمة <code>auto</code> التي تؤدي إلى إظهار أشرطة التمرير عند الحاجة إليها:<syntaxhighlight lang="css">
p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: auto;
}

</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|7.0
|1.0
|}
== البنية العامة ==
تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه.

=== <code>visible</code> ===
لن يتم اقتصاص المحتوى، لكن يمكن أن يُعرَض خارج صندوق المحتوى التابع للعنصر.
===  <code>hidden</code> ===
سيتم اقتصاص المحتوى، ولن يعرض المتصفح أشرطة تمرير.
===  <code>scroll</code> ===
سيتم اقتصاص المحتوى، وستعرض المتصفحات أشرطة تمرير سواءً تم اقتصاص المحتوى أم لا، وهذا يجعلنا نتفادى مشكلة ظهور واختفاء شريط التمرير في الصفحات الديناميكية.

يجدر بالذكر أنَّ الطابعات قد تطبع المحتوى الذي يزيد عن صندوق المحتوى.
===  <code>auto</code> ===
ترك الأمر بيد البرمجية التي تُعالِج المستند، فمثلًا ستعرض متصفحات الحواسيب شريط تمرير إن تجاوز المحتوى صندوق المحتوى.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
overflow: visible | hidden | scroll | auto;
</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصيات الفرعية التي تضبطها الخاصية overflow وهي: <code>[[CSS/overflow-x|overflow-x]]</code>، و <code>[[CSS/overflow-y|overflow-y]]</code>.
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند.
* صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر.

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-overflow-3/#propdef-overflow CSS Overflow Module Level 3].
* مواصفة [https://drafts.csswg.org/css-box-3/#propdef-overflow CSS Basic Box Model].
* مواصفة ‎[http://www.w3.org/TR/CSS2/visufx.html#overflow CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Box Model|{{SUBPAGENAME}}]]