خاصیت overflow در CSS در وب سایت PNLdev

نمونه کد

این مثال مقادیر مختلفی از ویژگی overflow را نشان میدهد:

div.ex1 {
  overflow: scroll;
}

div.ex2 {
  overflow: hidden;
}

div.ex3 {
  overflow: auto;
}

div.ex4 {
  overflow: clip;
}

div.ex5 {
  overflow: visible;
}

آزمایشگاه

تعریف و کاربرد

خصوصیت overflow مشخص میکند که اگر محتوا از کادر خارج شود چه اتفاقی باید بیفتد.

اطلاعات

#	توضیحات
مقدار پیشفرض	visible
ارث بری	خیر
انیمیشن	خیر
نسخه	CSS2
نگارش JS	object.style.overflow="scroll"

سازگاری با مرورگر

اعداد نوشته شده در جدول نسخه ای از مرورگر را مشخص می کنند که به طور کامل قابلیت پشتیبانی از خصوصیت overflow را دارند.

#	کروم	ادج	فایرفاکس	سافاری	اپرا
overflow

شیوه نگارش

overflow: visible|hidden|clip|scroll|auto|initial|inherit;

مقادیر

مقادیر	توضیحات
visible	ویژگی overflow برداشته نشده است و شما میتوانید بقیه محتوا را خارج از فضای مختص به محتوا مشاهده کنید.این مقدار از پیش تأیین شده است.
hidden	ویژگی overflow برداشته شده است و بقیه محتوا غیر قابل مشاهده خواهد بود. محتوا را می توان به صورت برنامه ریزی شده نشان داد.(به عنوان مثال با قرار دادن scrollLeft یا scrollTo())
clip	ویژگی overflow برداشته شده است و بقیه محتوا غیر قابل مشاهده خواهد بود. نوار پیمایش نیز برداشته خواهد شد.
scroll	ویژگی overflow برداشته شده است، اما یک نوار پیمایش اضافه شده است تا بقیه محتوا قابل مشاهده باشد.
auto	اگر ویژگی overflow برداشته شود، یک نوار پیمایش باید اضافه شود تا بقیه محتوا را ببینید.
initial	این ویژگی را به مقدار پیش فرض خود برمیگرداند.
inherit	این ویژگی را از عنصر اصلی خود به ارث می برد.

صفحات مرتبط

آموزش CSS: CSS Overflow

آموزش CSS: CSS Positioning

مرجع HTML DOM: ویژگی overflow

CSS Reference

مرجع CSS

خاصیت های CSS

خاصیت overflow در CSS overflow property CSS