ما هي خاصية overflow؟
تُستخدم خاصية overflow لتحديد ما يحدث عندما يكون المحتوى داخل عنصر أكبر من حجمه المحدد.
القيم الأساسية لـ overflow:
| القيمة | الوصف |
|---|---|
visible |
(الافتراضية) يظهر المحتوى خارج حدود العنصر |
hidden |
يخفي المحتوى الزائد ولا يسمح بالتمرير |
scroll |
يُظهر شريط تمرير دائمًا (حتى لو لا حاجة له) |
auto |
يُظهر شريط تمرير فقط عند الحاجة (عند تجاوز المحتوى لحجم العنصر) |
مثال تطبيقي:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 150px;
border: 2px solid #333;
padding: 10px;
margin-bottom: 20px;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
</style>
</head>
<body>
<div class="box visible">
<strong>overflow: visible</strong><br>
هذا نص طويل جدًا سيخرج خارج الصندوق. هذا نص طويل جدًا سيخرج خارج الصندوق.
</div>
<div class="box hidden">
<strong>overflow: hidden</strong><br>
هذا نص طويل جدًا سيُقص داخل الصندوق. هذا نص طويل جدًا سيُقص داخل الصندوق.
</div>
<div class="box scroll">
<strong>overflow: scroll</strong><br>
هذا نص طويل جدًا مع شريط تمرير دائم. هذا نص طويل جدًا مع شريط تمرير دائم.
</div>
<div class="box auto">
<strong>overflow: auto</strong><br>
هذا نص طويل جدًا مع شريط تمرير يظهر عند الحاجة. هذا نص طويل جدًا مع شريط تمرير يظهر عند الحاجة.
</div>
</body>
</html>
خاصية overflow-x و overflow-y
يمكنك تحديد التمرير أفقيًا أو عموديًا فقط:
.box {
overflow-x: scroll; /* تمرير أفقي فقط */
overflow-y: hidden; /* إخفاء التمرير العمودي */
}
ملاحظات هامة:
- استخدم
overflow: autoفي الصناديق ذات المحتوى المتغير. overflowضروري في تصميم مربعات المحتوى، الجداول، أو نوافذ منبثقة.- لاستخدام
overflowبشكل فعّال، يجب تحديدwidthوheightللعنصر.
الواجب العملي:
- أنشئ صندوقًا بارتفاع ثابت ومحتوى طويل.
- جرّب تطبيق كل من
overflow: hiddenوscrollوautoولاحظ الفرق. - جرّب أيضًا استخدام
overflow-xوoverflow-yبشكل منفصل.