overflow در css

توسط : نجمه زورمنددر: دی ۰۶, ۱۳۹۸در: دوره آموزش CSS3تگ ها: css, htmlبدون دیدگاهبازدیدها: 325

چاپ ایمیل

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

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

visible: حالت پیش فرض است که در این حالت، محتوای سرریز شده، بریده نمی شود و مقدار اضافی آن بیرون از محدوده، نمایش داده می شود.
hidden: در این حالت محتوای سرریز شده بریده می شود و نمایش داده نمی شود.
scroll: در این حالت، محتوای سرریز شده بریده می شود (clipped) و یک scrollbar برای نمایش آن قرار داده می شود.
auto: این حالت، کاملا شبیه حالت قبل است با این تفاوت که در این جا، تنها موقعی که نیاز باشد scrollbars اضافه می شود.

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

نکته: در OS X Lion (در مکینتاش) به صورت پیش فرض، اسکرول بار، پنهان است و هنگامی که استفاده شود، نشان داده می شود. (با وجود این که “overflow:scroll” تعیین شده است)

overflow: visible

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

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

که کد آن را در زیر، مشاهده می کنید:

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

overflow: hidden

با تعیین hidden، مقداری که overflow است (سرریز می شود)، بریده می شود و مابقی متن پنهان می شود. به مثال زیر دقت کنید:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

div {
  overflow: hidden;
}

overflow: scroll

با قرار دادن مقدار scroll برای overflow مقدار سرریز بریده می شود و یک اسکرول بار برای جابجا شدن داخل محدوده ظاهر می شود.
نکته ای که وجود دارد اینست که هر دو اسکرول بار عمودی و افقی ایجاد می شوند هرچند که نیازی به آن نباشد.
به مثال زیر توجه کنید:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

div {
  overflow: scroll;
}

overflow: auto

این حالت، دقیقا مانند خصوصیت scroll است، با این تفاوت که هر کجا که نیاز باشد، scrollbar اضافه می کند:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

div {
  overflow: auto;
}

overflow-x و overflow-y

خصوصیات overflow-x و overflow-y مشخص می کنند که چگونه مقدار overflow را تنها در جهت افقی یا عمودی تعیین کنیم. (یا در هر دو جهت)

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

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

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

برگرفته از وب سایت w3schools.com

2+

مطالب مشابه

دیدگاه بگذارید

برای اطلاع از نظرات کلیک کنید

تمامی حقوق مادی و معنوی برای وب تی ام ال محفوظ است.