تستخدم هذه الخاصية لتحديد السلوك الذى يحدث عندما تفيض أو تتجاوز
المحتويات عن العنصر الحاوي لها، فجميع العناصر داخل الصفحات هي عبارة عن
صناديق مربعة أو مستطيلة وفي حالة عدم تحديد عرض أو ارتفاع لها فإنه كلما
زادت المحتويات داخلها تمددت تبعاً لذلك لإستيعاب المحتوى، أما في حالة
تحديد ارتفاع أو عرض للصناديق تأتي هنا وظيفة الخاصية overflow كي تعالج
بها الطريقة التى تظهر بها المحتويات.
في css2 يمكننا استخدام الخاصية بـ4 قيم مختلفة كما موضح بالجدول ثم شرح مفصل لكل حالة على حدة والفرق بينهم:
Property | Value | Description |
overflow: | visible | جميع المحتويات مرئية وهي القيمة الإفتراضية. |
overflow: | hidden | المحتويات الفائضة او الخارجة عن الإطار الحاوي لن تظهر. |
overflow: | scroll | في حالة تجاوز المحتويات يظهر شريط التمرير. |
overflow: | auto | وتعني تعميم الوصول أي في حال كانت المحتويات زائدة أظهر شريط التمرير. |
ظهرت هنا جميع المحتويات وتخطت الصندوق كما لم تؤثر على العناصر التالية
ولم تدفعها لنهاية المحتوى كما في الوضع الطبيعي دون تحديد ارتفاع، يمكن
أن تظهر في متصفحات IE ومع الأعمدة التى عامت وتجانبت بالخاصية float أن
الصور الكبيرة والتى لا تجد مساحة للتمدد في الإتجاه الأفقي -كما في
المثال- أن تؤثر على التخطيط حيث يسقط العمود المجاور للأسفل.
القيمة hidden
هنا لا يوجد فائض حيث أن القيمة تقوم بإخفاء أي محتويات تتطلب مساحة عرض
أكبر، مع الوضع في الإعتبار أن أي محتويات تم إخفائها لا يمكن الوصول
إليها -طبعاً موجودة في مصدر الصفحة- وتستخدم عادة عند تخطيط المواقع
الإخبارية والمجلات المتغيرة المحتوى لتفادي تشوه التصميم في حالة الصور
الكبيرة، كما ذكرنا في درس سابق.
القيمة scroll
تخفي المحتويات الزائدة أيضا ولكن مع الإختلاف أنها توفر شريط تمرير
بحيث يمكن الوصول الى المحتويات المخفية و رؤيتها، لكن المشكلة أن شريط
التمرير في هذه الحاله يظهر دائما في المستوى الأفقي والرأسي سواء كانت
هناك محتويات زائدة أو لا!
لا توجد محتويات زائدة ومخفية ومع ذلك ظهرت أشرطة التمرير دون الحاجة إليها.
القيمة auto
تشبه هذه القيمة سابقتها إلا أنها تحل مشكلة ظهور أشرطة التمرير دائما،
حيث تظهر عند الحاجة إليها فقط عندما يكون هناك محتويات زائدة تم إخفائها
سواء في الإتجاه الأفقي أو الرأسي.
المحتويات الزائدة في الإتجاة الأفقي فقط ولهذا ظهر شريط التمرير واختفى في الإتجاه الاخ