Layout - ویژگی Overflow

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی 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 مشخص می‌کند که اگر محتوا از کادر عنصر سرزیر شود چه اتفاقی بیفتد.

مثال
1 div {
2   width: 200px;
3   height: 50px;
4   background-color: #eee;
5   overflow: visible;
6 }


overflow: hidden

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

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

مثال
1 div {
2   overflow: hidden;
3 }


overflow: scroll

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

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

مثال
1 div {
2   overflow: scroll;
3 }


overflow: auto

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

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

مثال
1 div {
2   overflow: auto;
3 }


overflow-x و overflow-y

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

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

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

مثال
1 div {
2   overflow-x: hidden; /* Hide horizontal scrollbar */
3   overflow-y: scroll; /* Add vertical scrollbar */
4 }


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

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

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


منابع آموزشی