تصميم الموقع CSS - التدفق الزائد

تتحكم خاصية CSS overflow في كيفية التعامل مع المحتوى الذي يكون كبيرًا جدًا ولا يمكن وضعها في المساحة المحددة.

هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى. هذا النص طويل جدًا، وارتفاع صندوقه هو فقط 100 بكسل. لذلك، تم إضافة شريط التمرير لمساعدة القارئ على تمرير المحتوى.

جربها بنفسك

CSS Overflow

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

overflow يمكن تعيين الخاصية القيم التالية:

  • visible - افتراضي. لا يتم قطع التدفق الزائد. يتم تمرير المحتوى خارج إطار العنصر
  • hidden - يتم قطع التدفق الزائد وسيكون المحتوى المتبقي غير مرئي
  • scroll - يتم قطع التدفق الزائد واضافة شريط التمرير لعرض المحتوى المتبقي
  • auto - مع scroll مثل، ولكن فقط عند الحاجة لإضافة شريط التمرير

ملاحظة:overflow تطبيق الخاصية فقط على العناصر الصندوقية التي لها طول محدد.

ملاحظة:في OS X Lion (على Mac)، يتم إخفاء شريط التمرير افتراضياً، ويتم عرضه فقط عند الاستخدام (حتى لو تم تعيين "overflow:scroll").

overflow: visible

بافتراض أن التدفق الزائد مرئي افتراضيا.visible)، مما يعني أنه لن يتم قطعه، بل سيتم تمريره خارج إطار العنصر:

عندما ترغب في التحكم بشكل أفضل في التخطيط، يمكنك استخدام خاصية overflow. تحدد خاصية overflow ما سيحدث إذا كان المحتوى يتجاوز إطار العنصر.

مثال

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

جربها بنفسك

overflow: hidden

إذا كنت تستخدم hidden القيمة، سيتم قطع التدفق الزائد واخفاء المحتوى المتبقي:

عندما ترغب في التحكم بشكل أفضل في التخطيط، يمكنك استخدام خاصية overflow. تحدد خاصية overflow ما سيحدث إذا كان المحتوى يتجاوز إطار العنصر.

مثال

div {
  overflow: hidden;
}

جربها بنفسك

overflow: scroll

إذا تم تعيين القيمة إلى scroll، سيتم قطع التدفق الزائد واضافة شريط التمرير لتمرير المحتوى داخل الإطار. يرجى ملاحظة أن هذا سيضيف شريط تمرير في الاتجاهين الأفقي والعمودي (حتى لو لم تكن بحاجة إليه):

عندما ترغب في التحكم بشكل أفضل في التخطيط، يمكنك استخدام خاصية overflow. تحدد خاصية overflow ما سيحدث إذا كان المحتوى يتجاوز إطار العنصر.

مثال

div {
  overflow: scroll;
}

جربها بنفسك

overflow: auto

auto قيمة يشبه scroll، ولكنها تضيف شريط التمرير فقط عند الحاجة:

عندما ترغب في التحكم بشكل أفضل في التخطيط، يمكنك استخدام خاصية overflow. تحدد خاصية overflow ما سيحدث إذا كان المحتوى يتجاوز إطار العنصر.

مثال

div {
  overflow: auto;
}

جربها بنفسك

overflow-x و overflow-y

overflow-x overflow-y تحدد الخاصية ما إذا كان يجب تغيير التدفق الزائد بشكل أفقي أو عمودي (أو كلاهما) في المحتوى:

  • overflow-x تحديد كيفية التعامل مع الحواف اليسرى واليمنى للمحتوى.
  • overflow-y تحديد كيفية التعامل مع الحواف العلوية والسفلية للمحتوى.
عندما ترغب في التحكم بشكل أفضل في التخطيط، يمكنك استخدام خاصية overflow. تحدد خاصية overflow ما سيحدث إذا كان المحتوى يتجاوز إطار العنصر.

مثال

div {
  overflow-x: hidden; /* إخفاء شريط التدول الأفقي */
  overflow-y: scroll; /* إضافة شريط التدول العمودي */
}

جربها بنفسك

جميع خصائص CSS Overflow

خصائص وصف
overflow تحديد ما سيحدث إذا تجاوز المحتوى إطار العنصر.
overflow-x تحديد كيفية معالجة الحواف اليسرى واليمنى للمحتوى عند تجاوز محتوى منطقة العنصر.
overflow-y تحديد كيفية معالجة الحواف العلوية والسفلية للمحتوى عند تجاوز محتوى منطقة العنصر.