آموزش ویژگی overflow در CSS

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

#overflowTest {
  background: #4CAF50;
  color: white;
  padding: 15px;
  width: 50%;
  height: 100px;
  overflow: scroll;
  border: 1px solid #ccc;
}

 ویژگی Overflow در CSS

وقتی که محتوای یک عنصر برای اینکه در یک ناحیه ی مشخص قرار گیرد، بسیار بزرگ باشد، ویژگی overflow مشخص می کند که محتوا کوتاه شود یا نوارهای اسکرول اضافه شوند. ویژگی overflow مقادیر زیر را می پذیرد:

1. visible : این مقدار پیش فرض است. سرریز(overflow) کوتاه نمی شود. محتوا در بیرون از جعبه ی عنصر ارائه می شود. 

2. hidden : سرریز(overflow) کوتاه می شود و بقیه ی محتوا مخفی می شوند.

3. scroll : سرریز(overflow) کوتاه می شود، و یک نوار اسکرول اضافه می شود تا بتوانیم بقیه ی محتوا را مشاهده کنیم.

4. auto : مانند مقدار scroll عمل می کند اما نوارهای اسکرول را تنها در صورت لزوم اضافه می کند.

نکته: ویژگی overflow تنها در عنصر های بلوکی(block) که یک ارتفاع(height) مشخص دارند، کار می کند.

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

بررسی ویژگی و مقدار overflow: visible

ویژگی overflow به طور پیش فرض برابر با visible است؛ این یعنی محتوای آن، به طور پیش فرض، کوتاه نمی شود و در بیرون از جعبه ی عنصر ارائه می شود:

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

بررسی ویژگی و مقدار overflow: hidden در CSS

اگر از مقدار hidden استفاده کنیم، overflow یا همان سرریز کوتاه می شود و بقیه ی محتوا مخفی می شود:

بررسی ویژگی و مقدار overflow: scroll

اگر مقدار ویژگی overflow را برابر با scroll قرار دهیم، سرریز کوتاه می شود و یک نوار اسکرول به درون جعبه اضافه می شود. توجه کنید که این دستور، یک نوار اسکرول افقی و عمودی را اضافه می کند(حتی اگر به آن نیازی نداشته باشیم).

بررسی ویژگی و مقدار overflow: auto

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

div {
  overflow: auto;
}

 بررسی ویژگی های overflow-x و overflow-y

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

overflow-x مشخص می کند که برای اضلاع سمت چپ و  راست(اسکرول افقی) محتوا چه کاری باید انجام دهیم.

overflow-y مشخص می کند که برای اضلاع بالا و پایین(اسکرول عمودی) محتوا چه کاری باید انجام دهیم.

div {
  overflow-x: hidden; /* مخفی کردن نوار اسکرول افقی */
  overflow-y: scroll; /* اضافه کردن نوار اسکرول عمودی */
}

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