CSS Overflow إخفاء وإظهار العناصر

CSS - الخاصية overflow

🔸 تُستخدم خاصية overflow لتحديد ماذا يحدث عندما يكون محتوى العنصر أكبر من أبعاده المحددة (العرض أو الارتفاع). هل سيتم إخفاء المحتوى الزائد؟ أم سيتم إظهار شريط تمرير؟ أم سيتم عرضه بالكامل خارج العنصر؟

📚 القيم المتاحة للخاصية overflow

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

🧪 مثال على overflow: visible (الوضع الافتراضي)

<div style="width: 200px; height: 100px; border: 1px solid black; overflow: visible;">
  محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا
</div>

📌 المحتوى سيخرج من حدود الصندوق ويظل ظاهرًا.

🧪 مثال على overflow: hidden

<div style="width: 200px; height: 100px; border: 1px solid black; overflow: hidden;">
  محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا
</div>

📌 المحتوى الزائد سيتم إخفاؤه ولن يظهر.

🧪 مثال على overflow: scroll

<div style="width: 200px; height: 100px; border: 1px solid black; overflow: scroll;">
  محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا
</div>

📌 ستظهر أشرطة التمرير دائمًا (أفقي ورأسي) حتى لو لم يكن هناك محتوى زائد.

🧪 مثال على overflow: auto

<div style="width: 200px; height: 100px; border: 1px solid black; overflow: auto;">
  محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا محتوى طويل جدًا
</div>

📌 سيتم إظهار أشرطة التمرير فقط إذا لزم الأمر (عند تجاوز المحتوى).

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

• يمكن استخدام overflow-x و overflow-y لتحديد سلوك التمرير الأفقي أو الرأسي فقط.
• الخاصية overflow لا تعمل إلا إذا تم تحديد أبعاد العنصر (مثل width و height).
• التمرير التلقائي مفيد جدًا في التصاميم المتجاوبة.