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

من موسوعة حسوب
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
لا ملخص تعديل
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخاصية <code>overflow-x</code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:الخاصية <code>overflow-x</code>}}</noinclude>
الخاصية <code>overflow-x</code> في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي على يمينه أو يساره.<syntaxhighlight lang="css">
الخاصية <code>overflow-x</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-x: visible;
overflow-x: visible;
سطر 19: سطر 39:


</syntaxhighlight>
</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" |القيمة المحسوبة
|كما حُدِّدَت.
|}


== أمثلة ==
== أمثلة ==
سطر 96: سطر 98:
تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه.
تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه.


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


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



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

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

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

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

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

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

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

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

أمثلة

مثال بسيط. شيفرة HTML:

<ul>
  <li><code>overflow-x:hidden</code>
    <div id="div1">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:scroll</code>
    <div id="div2">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:visible</code>
    <div id="div3">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:auto</code>
    <div id="div4">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>
</ul>

شيفرة CSS:

#div1, #div2, #div3, #div4 {
  border: 1px solid black;
  width:  250px;
  margin-bottom: 12px;
}

#div1 { overflow-x: hidden;}
#div2 { overflow-x: scroll;}
#div3 { overflow-x: visible;}
#div4 { overflow-x: auto;}

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 3.5 5.0 9.5 3.0

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

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

visible

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

hidden

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

scroll

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

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

auto

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

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

overflow-x: visible | hidden | scroll | auto;

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