الخاصية Overflow

التعامل مع المحتوى الفائض

قد يكون هناك موقف يكون فيه محتوى العنصر أكبر من أبعاد الصندوق نفسه. على سبيل المثال ، لا تسمح خصائص العرض والارتفاع المحددة بمساحة كافية لاستيعاب محتوى العنصر.
تتيح لنا الخاصية overflow تحديد ما إذا كنا نريد قص المحتوى أو عرض أشرطة التمرير أو تجاوز عرض المحتوى لعنصر اخر على مستوى الكتلة.
يمكن أن تأخذ هذه الخاصية إحدى القيم التالية: visible (القيمة الإفتراضية) و hidden و scroll و auto . تم اضافة الخصائص overflow-x و overflow-y لـ CSS3 بحيث تسمح هذه الخصائص بالتحكم المستقل في القص الرأسي والأفقي.

مثال
تشغيل
  1. div {
  2. width: 250px;
  3. height: 150px;
  4. overflow: scroll;
  5. }
القيمة الوصف
visible القيمة الافتراضية. لن يتم قص المحتوى ؛ سيتم عرضه خارج مربع العنصر ، وبالتالي قد يتداخل مع محتوى آخر.
hidden يتم قطع المحتوى الذي يفيض في مربع العنصر ويصبح باقي المحتوى غير مرئي.
scroll يتم قطع المحتوى الفائض ، تمامًا مثل hidden ، ولكنه يوفر آلية تمرير للوصول إلى المحتوى الفائض.
auto إذا تجاوز المحتوى مربع العنصر ، فسيوفر المتصفح تلقائيًا أشرطة التمرير لرؤية باقي المحتوى ، وإلا فلن يظهر شريط التمرير.
« التالي السابق »