overflow:توسط این خاصیت تعیین می شود که چنانچه محتویات یک عنصر از عرض یا طول تعیین شده برای آن بیشتر شد ، مرورگر برای نمایش قسمت اضافه چه کاری انجام دهد ، که می تواند یکی از حالت های زیر باشد :
– visible : در این حالت ، قسمت اضافه نیز درون عنصر نمایش داده شده و عرض و طول آن به اندازه ای که کل محتویات را درون خود جای دهد ، افزایش می یابد .
– hidden : در این حالت ، فقط به اندازه تعیین شده برای عنصر از محتویات آن نمایش داده می شود و قسمت اضافه مخفی می ماند .
– scroll : در این حالت ، مرورگر به طور اتوماتیک در جهت هایی که نیاز به افزایش اندازه عنصر برای مشاهده قسمت های اضافه است ، نوار پیمایش قرار می دهد و فقط به اندازه واقعی عنصر در هر لحظه از محتویات آن را نمایش می دهد .
– auto : در این حالت نیز مرورگر به طور اتوماتیک در صورت نیاز در ۲ جهت نوار پیمایش قرار می دهد .
مثال : در مثال زیر یک پارگراف با عرض و طول مشخص قرار داده شده است ، ولی میزان محتویات درونی آن از اندازه تعیین شده برای آن بیشتر است . در ۳ خروجی زیر انواع حالت های ممکن برای نحوه نمایش قسمت اضافه نمایش داده شده است :
حالت visible
نکته : می بینیم که در این حالت عرض پاراگراف از انداره واقعی بیشتر شده تا کل محتویات را نمایش دهد .
| < p style=”width: 120px; height: 50px; overflow: visible” >
< /p > |
حالت hidden
نکته : در این حالت عرض و ارتفاع پاراگراف از انداره واقعی بیشتر نشده و محتویات اضافه نمایش داده نشده است .
| < p style=”width: 120px; height: 50px; overflow: hidden” >
< /p > |
حالت scroll و auto
نکته : می بینیم که در این حالت برای نمایش محتویات اضافه از نوار پیمایش استفاده شده و عنصر در اندازه واقعی خود نمایش داده می شود .
| < p style=”width: 120px; height: 50px; overflow: scroll” >
< /p > |
