Overflow في CSS
يمكنك إعطاء الصندوق حجماً ثابتاً. ماذا لو كان المحتوى أطول أو أعرض من ذلك الصندوق؟ overflow يقرّر إن كان المحتوى الزائد يسيل للخارج، أو يُقصّ، أو يصبح قابلاً للتمرير.
الكلمات المفتاحية بنظرة واحدة
📊 قيم overflow الشائعة
| القيمة | المعنى اليومي |
|---|---|
visible (افتراضي) |
المحتوى الزائد قد يسيل خارج الصندوق |
hidden |
المحتوى الزائد يُقصّ؛ بلا أشرطة تمرير |
scroll |
تُعرض أشرطة التمرير (غالباً حتى إن لم تُحتج) |
auto |
تظهر أشرطة التمرير فقط عند فيضان المحتوى |
الافتراضي: المحتوى قد يسيل
مع overflow: visible (الافتراضي)، قد يُرسم المحتوى الطويل خارج حواف الصندوق.
Overflow مرئي (افتراضي)
css.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}القصّ بـ hidden
overflow: hidden يقطع كل ما لا يتسع. مفيد للحواف النظيفة — لكن المستخدم لا يستطيع التمرير لبقية المحتوى.
Hidden يقصّ الفيضان
css.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}أشرطة دائماً مع scroll
overflow: scroll يجعل الصندوق قابلاً للتمرير وغالباً يحجز مساحة الشريط حتى حين يتسع المحتوى.
تمرير دائماً
css.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}auto — تمرير عند الحاجة فقط
overflow: auto اختيار يومي هادئ للّوحات: تظهر الأشرطة عند الفيضان، وغالباً تبتعد حين لا يلزم.
auto عند الحاجة
css.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}تحكّم بمحور واحد
استخدم overflow-x وoverflow-y حين يختلف السلوك الأفقي عن العمودي — مثلاً اسمح بالتمرير العمودي واقصّ الفيضان الجانبي.
تمرير عمودي وقصّ أفقي
css.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}عادة لوحة عملية
أعطِ الصندوق ارتفاعاً حقيقياً (أو max-height)، ثم اختر auto لمناطق محتوى قابلة للقراءة والتمرير.
لوحة ملاحظات قابلة للتمرير
css.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}جرّب بنفسك
- اصنع صندوقاً بـ
widthوheightقصير، ثم الصق عدة فقرات داخله. - بدّل
overflowبينvisibleوhiddenوscrollوauto. - ضع
overflow-x: hiddenوoverflow-y: autoعلى سطر نص عريض. - ابنِ
.note-panelبـmax-heightوراقب الأشرطة تظهر عند الحاجة فقط. - بلا حدّ ارتفاع (أو max-height) غالباً لا يجد overflow ما يقيّده.
أخطاء شائعة
- توقّع أثر overflow بلا ارتفاع أو عرض مقيّد
- استخدام
scrollفي كل مكان بينماautoأهدأ - خلط overflow (فيضان الصندوق) مع text-overflow (علامة الحذف على النص — أداة لاحقة)
- القصّ بـ
hiddenونسيان أن المستخدم قد يحتاج الوصول للبقية - الافتراض أن overflow يغيّر حساب box-sizing (لا يفعل)
ملخص
- الـ overflow يتحكم بالسيلان والقصّ والتمرير حين يكون المحتوى أكبر من صندوقه
- الافتراضي
visible؛hiddenيقصّ؛scrollيعرض أشرطة دائماً؛autoعند الحاجة - حجم مقيّد (height / max-height / width) مطلوب عادةً لرؤية الأثر
overflow-xوoverflow-yيفصلان المحاور- لكثير من اللوحات،
overflow: autoعادة هادئة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى