آموزش چیدمان CSS – سرریز

12 جولای 2021

overflowویژگی CSS آنچه را که برای محتوای خیلی بزرگ اتفاق می افتد برای قرار دادن در یک منطقه کنترل می کند.


سرریز CSS

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

overflowملک دارای مقادیر زیر:

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

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

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


سرریز شدن: قابل مشاهده است

به طور پیش فرض ، سرریز به visibleاین معنی است که بریده نشده است و خارج از جعبه عنصر ارائه می شود:

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

مثال

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

سرریز: پنهان

با hiddenمقدار ، سرریز کلیپ می شود و بقیه مطالب پنهان می شوند:

مثال

div {
  overflow: hidden;
}

سرریز کردن: پیمایش کردن

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

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

مثال

div {
  overflow: scroll;
}

سرریز: خودکار

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

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

مثال

div {
  overflow: auto;
}

سرریز x و سرریز y

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

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

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

مثال

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.