الفرق بين المراجعتين لصفحة: «CSS/overflow»

مراجعة 08:15، 8 يوليو 2018

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

بطاقة الخاصية

القيمة الابتدائية	`visible`
تُطبَّق على	عناصر `block-level` و `inline-block` غير المُستبدَلة (non-replaced).
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* لن يتم اقتصاص المحتوى */
overflow: visible;

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

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

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

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

أمثلة

هذا مثال عن القيمة الافتراضية visible التي تؤدي إلى عرض ما يزيد من المحتوى على جوانب العنصر:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

شيفرة CSS:

p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: visible;
}

مثال عن القيمة hidden التي ستؤدي إلى اقتصاص المحتوى الزائد:

p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: hidden;
}

مثال عن القيمة scroll التي تؤدي إلى إظهار أشرطة التمرير دومًا:

p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: scroll;
}

مثال عن القيمة auto التي تؤدي إلى إظهار أشرطة التمرير عند الحاجة إليها:

p {
  width: 12em;
  height: 6em;
  padding: 0.25em;
  border: dashed thin #069;
  overflow: auto;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	7.0	1.0

البنية العامة

تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه.

`visible`

لن يتم اقتصاص المحتوى، لكن يمكن أن يُعرَض خارج صندوق المحتوى التابع للعنصر.

`hidden`

سيتم اقتصاص المحتوى، ولن يعرض المتصفح أشرطة تمرير.

`scroll`

سيتم اقتصاص المحتوى، وستعرض المتصفحات أشرطة تمرير سواءً تم اقتصاص المحتوى أم لا، وهذا يجعلنا نتفادى مشكلة ظهور واختفاء شريط التمرير في الصفحات الديناميكية.

يجدر بالذكر أنَّ الطابعات قد تطبع المحتوى الذي يزيد عن صندوق المحتوى.

`auto`

ترك الأمر بيد البرمجية التي تُعالِج المستند، فمثلًا ستعرض متصفحات الحواسيب شريط تمرير إن تجاوز المحتوى صندوق المحتوى.

البنية الرسمية

overflow: visible | hidden | scroll | auto;

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

مواصفة CSS Overflow Module Level 3.
مواصفة CSS Basic Box Model.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>overflow</code>}}</noinclude>
-الخاصية <code>overflow</code> في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي عند تجاوزه أبعاد الحاوية الكتلية التي هو فيها.<syntaxhighlight lang="css">
+الخاصية <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;
@@ سطر 19: / سطر 39: @@
 </syntaxhighlight>
-{| 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" |القيمة المحسوبة
-|كما حُدِّدَت.
-|}
 == أمثلة ==
@@ سطر 98: / سطر 100: @@
 تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه.
-=== القيمة <code>visible</code> ===
+=== <code>visible</code> ===
 لن يتم اقتصاص المحتوى، لكن يمكن أن يُعرَض خارج صندوق المحتوى التابع للعنصر.
-=== القيمة <code>hidden</code> ===
+===  <code>hidden</code> ===
 سيتم اقتصاص المحتوى، ولن يعرض المتصفح أشرطة تمرير.
-=== القيمة <code>scroll</code> ===
+===  <code>scroll</code> ===
 سيتم اقتصاص المحتوى، وستعرض المتصفحات أشرطة تمرير سواءً تم اقتصاص المحتوى أم لا، وهذا يجعلنا نتفادى مشكلة ظهور واختفاء شريط التمرير في الصفحات الديناميكية.
 يجدر بالذكر أنَّ الطابعات قد تطبع المحتوى الذي يزيد عن صندوق المحتوى.
-=== القيمة <code>auto</code> ===
+===  <code>auto</code> ===
 ترك الأمر بيد البرمجية التي تُعالِج المستند، فمثلًا ستعرض متصفحات الحواسيب شريط تمرير إن تجاوز المحتوى صندوق المحتوى.