🌊 فهم خاصية Overflow في CSS: دليلك الشامل للتحكم بالمحتوى الزائد

هل سبق وأن صممت صندوقاً (div) بعرض وارتفاع محددين، ثم أضفت محتوى داخله فوجدته يخرج عن الحدود التي حددتها؟ هذه المشكلة الشائعة هي بالضبط ما تحله خاصية overflow في CSS! في هذا الدرس، سنتعلم كيفية السيطرة الكاملة على المحتوى الزائد داخل عناصر HTML.

🎯 ما هي خاصية Overflow؟

خاصية overflow في CSS تتحكم فيما يحدث للمحتوى الذي يكون أكبر من أن يتسع داخل العنصر الأب الخاص به. تخيل أن لديك كوب ماء. إذا سكبت ماءً أكثر من سعة الكوب، فالماء سيسكب على الطاولة. خاصية overflow هي بمثابة قرارك: هل تترك الماء ينسكب (visible)؟ أم تضع صحناً تحت الكوب لالتقاط الماء الزائد (hidden)؟ أم تضيف غطاء للكوب يمنع سكب الماء أصلاً (scroll)؟

تُطبق هذه الخاصية على العناصر التي لها أبعاد محددة (مثل width و height).

.my-box {
  width: 300px;
  height: 150px;
  overflow: /* القيمة التي نختارها هنا */;
}

📋 قيم خاصية Overflow الأساسية

لخاصية overflow أربع قيم أساسية تحدد السلوك المختلف للمحتوى الزائد.

1. overflow: visible (الافتراضي) 👀

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

.box-visible {
  width: 200px;
  height: 100px;
  border: 2px solid blue;
  overflow: visible; /* هذه هي القيمة الافتراضية، يمكن حذفها */
}

في المثال أعلاه، إذا كان النص داخل .box-visible طويلاً، فسيستمر في التدفق إلى أسفل خارج الصندوق الأزرق.

2. overflow: hidden 🙈

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

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

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

3. overflow: scroll 🖱️

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

.box-scroll {
  width: 200px;
  height: 100px;
  border: 2px solid green;
  overflow: scroll; /* إضافة أشرطة التمرير */
}

سترى شريطي تمرير حتى لو كان المحتوى صغيراً ويتسع داخل الصندوق. هذا مفيد عندما تعلم أن المحتوى سيزداد حجماً لاحقاً.

4. overflow: auto 🤖

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

.box-auto {
  width: 200px;
  height: 100px;
  border: 2px solid purple;
  overflow: auto; /* أشرطة التمرير تظهر عند الحاجة فقط */
}

هذه القيمة هي الأكثر استخداماً لأنها توفر تجربة مستخدم أنظف وأكثر ذكاءً.

💡 مثال عملي شامل

لنطبق ما تعلمناه في مثال بسيط. سننشئ ثلاثة صناديق بنفس الحجم ولكن بقيم overflow مختلفة.

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    gap: 20px;
  }
  .box {
    width: 150px;
    height: 100px;
    border: 2px solid black;
    padding: 10px;
  }
  .visible { overflow: visible; }
  .hidden { overflow: hidden; }
  .scroll { overflow: scroll; }
</style>
</head>
<body>

<div class="container">
  <div class="box visible">
    <p>هذا نص طويل جداً سيتجاوز حدود هذا الصندوق الصغير لأنه مكتوب بقيمة overflow: visible.</p>
  </div>

  <div class="box hidden">
    <p>هذا نص طويل جداً سيتم إخفاؤه بعد حدود هذا الصندوق الصغير لأنه مكتوب بقيمة overflow: hidden.</p>
  </div>

  <div class="box scroll">
    <p>هذا نص طويل جداً يمكنك التمرير لرؤيته لأنه مكتوب بقيمة overflow: scroll.</p>
  </div>
</div>

</body>
</html>

🚀 ملخص سريع

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