CSS overflow属性

تعريف و استخدام

overflow يحدد هذا الخاصية ما يحدث عند تجاوز المحتوى للعنصر.

شرح

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

انظر أيضًا:

دليل CSS:تعيين CSS

دليل HTML DOM:خاصية overflow

مثال

إعداد خاصية overflow:

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

جرب بنفسك

جافا سكربت:

overflow: visible|hidden|clip|scroll|auto|initial|inherit;

قيمة الخاصية

القيمة الوصف
مرئي القيمة الافتراضية. لن يتم تقليم المحتوى، وسيكون موجودًا خارج إطار العنصر.
hidden سيتم تقليم المحتوى، وسيكون المحتوى المتبقي غير مرئي.
scroll سيتم تقليم المحتوى، ولكن المتصفح سيظهر شريط التمرير لعرض المحتوى المتبقي.
auto إذا تم تقليم المحتوى، فإن المتصفح سيظهر شريط التمرير لعرض المحتوى المتبقي.
توريث يحدد هذا الخاصية ما يجب أن يتم توريثه من عنصر الأب الخاصية overflow.

تفاصيل تقنية

القيمة الافتراضية: مرئي
التنسيق: لا
الإصدار: CSS2
جافا سكربت: object.style.overflow="scroll"

أمثلة إضافية

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

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0