دروس CSS - شرح Overflow

الخاصية Overflow

الخاصية Overflow تقوم بتقطيع جزء من المحتوى, أو إضافة شريط التمرير (ScrollBar), عندما يكون المحتوى كبيرًا جدًا بحيث لا يمكن احتوائه في منطقة محددة.

ملاحظة: هذه الخاصية تعمل فقط على العناصر التي من نوع block مع ارتفاع محدد.

الخاصية تأخد 4 قيم visible, hidden, scroll, auto

القيمة visible: هي القيمة اﻹفتراضية للعنصر Overflow, وتعني أنه لن يتم تقطيع أي جزء من المحتوى, وسيظهر المحتوى المتبقي خارج المنطقة المحددة.

القيمة hidden: تعني أنه سيتم تقطيع المحتوى, والجزء اﻷخر من المحتوى لن يظهر.

القيمة scroll: تعني أنه لن يتم تقطيع المحتوى وسيظهر شريط تمرير (ScrollBar), للرؤية المحتوى المتبقي.

القيمة auto: تعني أنه سيظهر شريط تمرير (ScrollBar) إذا كان المحتوى أكبر من المنطقة المحددة.

يمكنك تجربتها بمثال بسيط كالتالى:

<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>

<div>
You can use the overflow property 
when you want to have better control of the 
layout. The overflow property 
specifies what happens if content 
overflows an element's box.
</div>

ستكون النتيجة كالتالي: