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

تأخذ خاصية overflow القيم التالية:

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

بالإضافة إلى overflow، توجد خاصيتان فرعيتان تتحكمان في اتجاه التجاوز بشكل منفصل:

  • overflow-x: يتحكم في تجاوز المحتوى في الاتجاه الأفقي (اليمين واليسار). يأخذ نفس قيم overflow (visible، hidden، scroll، auto).
  • overflow-y: يتحكم في تجاوز المحتوى في الاتجاه العمودي (الأعلى والأسفل). يأخذ نفس قيم overflow (visible، hidden، scroll، auto).

أمثلة:

CSS
/* إخفاء المحتوى الزائد */
.box {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

/* إضافة أشرطة تمرير */
.box2 {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

/* التحكم في التجاوز الأفقي والعمودي بشكل منفصل */
.box3 {
  width: 200px;
  height: 100px;
  overflow-x: hidden; /* إخفاء التجاوز الأفقي */
  overflow-y: auto; /* إضافة شريط تمرير عمودي إذا لزم الأمر */
}

متى نستخدم overflow؟

  • منع تداخل المحتوى: عندما نريد منع المحتوى من التداخل مع عناصر أخرى في الصفحة.
  • إنشاء مناطق قابلة للتمرير: لإنشاء مناطق يمكن للمستخدم التمرير فيها لرؤية محتوى أكثر.
  • التحكم في تخطيط الصفحة: تُستخدم overflow أحيانًا للتحكم في سلوك بعض العناصر في تخطيط الصفحة، مثل منع انهيار الهوامش (margin collapsing).

ملاحظات مهمة:

  • تؤثر خاصية overflow فقط على العناصر التي لها أبعاد محددة (مثل width و height أو max-height).
  • عند استخدام overflow: scroll أو overflow: auto، قد تظهر أشرطة التمرير حتى إذا لم يكن هناك تجاوز للمحتوى في بعض المتصفحات.
  • يمكن استخدام خاصية text-overflow للتحكم في كيفية عرض النص عندما يتجاوز عرض العنصر. هذه الخاصية تعمل بشكل مختلف عن overflow وتُستخدم خصيصًا للنصوص.

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