Layout - ویژگی Overflow

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

ویژگی overflow در CSS در مورد محتوایی که برای قرار گرفتن در یک ناحیه بسیار بزرگ، تصمیم‌گیری می‌کند.[۱]

Overflow در CSS

هنگامی که محتوای یک عنصر بسیار بزگتر از آن است که در ناحیه مشخصی جای گیرد، ویژگی overflow تعیین می‌کند که آیا محتوا را کوتاه کند (clip) یا نوار پیمایش (Scrollbar) قرار دهد.

ویژگی overflow دارای مقادیر زیر است:

  • visible - مقدار پیش‌فرض است. مقدار اضافی برش داده نمی‌شود. محتوا خارج از کادر عنصر رندر می‌شود
  • hidden - مقدار اضافی برش داده می‌شود، و باقی مانده محتوا مخفی خواهد شد
  • scroll - مقدار اضافی برش داده می‌شود، و یک نوار پیمایش برای مشاهده باقی مانده محتوا اضافه می‌شود
  • auto - بسیار شبیه به scroll است، اما این مورد فقط در صورت لزوم نوار پیمایش را اضافه می‌کند

توجه: خاصیت overflow فقط برای عناصر بلوک با ارتفاع مشخص کار می‌کند.

نکته: در سیستم عاملOS X Lion (در مک)، نوارهای پیمایش به صورت پیش‌فرض مخفی هستند و تنها زمانی که مورد استفاده قرار بگیرند نمایش داده می‌شوند (حتی اگر "overflow:scroll" تنظیم شده باشد)

overflow: visible

به صورت پیش‌فرض، مقدار overflow برابر با visible است، به این معنا که مقدار اضافی برش داده نمی‌شود و در خارج از کادر عنصر رندر می‌شود.

زمانی می‌توانید از ویژگی overflow که می‌خواهید کنترل بهتری برروی چیدمان داشته باشید. ویژگی overflow مشخص می‌کند که اگر محتوا از کادر عنصر سرزیر شود چه اتفاقی بیفتد.

مثال

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}


overflow: hidden

بامقدار hidden، مقدار اضافی برش داده می‌شود، و باقی مانده محتوا مخفی می‌شود:

زمانی می‌توانید از ویژگی overflow استفاده کنید که می‌خواهید کنترل بهتری برروی چیدمان داشته باشید. ویژگی overflow مشخص می‌کند که اگر محتوا از عنصر سرزیر شود چه اتفاقی بیفتد.

مثال

div {
  overflow: hidden;
}


overflow: scroll

با تنظیم مقدار overflow برابر با scroll، مقدار اضافی برش داده می‌شود و یک نوار پیمایش برای پیمایش درون جعبه اضافه می‌شود. توجه کنید که این مقدار، هم نوار پیمایش عمودی و هم افقی (حتی اگر نیازی به آن نیاز نباشد) اضافه می‌کند:

می‌توانید از ویژگی overflow زمانی استفاده کنید که می‌خواهید کنترل بهتری برروی چیدمان داشته باشید. ویژگی overflow مشخص می‌کند که اگر محتوا از عنصر سرزیر داشته باشد چه اتفاقی بیفتد.

مثال

div {
  overflow: scroll;
}


overflow: auto

مقدار auto بسیار شبیه به scrollاست، اما این مقدار تنها در صورت لزوم نوار پیمایش را به صفحه اضافه می‌کند.

شما می‌توانید از ویژگی overflow زمانی استفاده کنید که می‌خواهید کنترل بهتری برروی چیدمان داشته باشید. ویژگی overflow مشخص می‌کند که اگر محتوا از عنصر سرزیر داشته باشد چه اتفاقی بیفتد.

مثال

div {
  overflow: auto;
}


overflow-x و overflow-y

ویژگی‌های overflow-x و overflow-y مشخص می‌کند که سرریز محتوا فقط به صورت افقی یا عمودی (یا هر دو) می‌تواند تغییر داده شود.

overflow-x مشخص می‌کند که چه کاری می‌بایست با لبه‌های چپ/راست محتوا انجام شود.
overflow-y مشخص می‌کند که با لبه‌های بالا/پایین محتوا چه کاری باید انجام شود.

شما می‌توانید از ویژگی overflow زمانی استفاده کنید که می‌خواهید کنترل بهتری برروی چیدمان داشته باشید. ویژگی overflow مشخص می‌کند که اگر محتوا از عنصر سرریز داشته باشد چه اتفاقی بیفتد.

مثال

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}


خود را با تمرینها امتحان کنید!

تمامی ویژگی های overflow در CSS

ویژگی توضیحات
overflow مشخص می‌کند که در صورت سرریز محتوا چه اتفاقی می‌افتد
overflow-x مشخص می‌کند که در صورت سرریز محتوا چه کاری می‌بایست با جهت های سمت چپ / راست لبه محتوا صورت گیرد
overflow-y مشخص می‌کند در صورت سرریز محتوا چه کاری می‌بایست با جهت های سمت بالا / پایین لبه محتوا صورت گیرد


منابع آموزشی