آشنایی با صفت overflow در CSS

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


با استفاده از  صفت overflow میتوان محتوای اضافه را چید و یا نوار پیمایشی به یک عنصر اضافه کرد تا بتوان محتوای اضافه را با پیمایش مشاهده نمود :

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

 

صفت overflow دارای چهار مقدار زیراست : 

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

نکته : صفت overflow تنها برای عناصر block که دارای ارتفاع مشخص هستند کار میکند. 


overflow: visible 

به صورت پیشفرض صفت overflow دارای مقدار visible است و این به این معناست که محتوای اضافی چیده نمیشود و خارج از باکس عنصر مورد نظر نمایش داده میشود :

شما میتوانید از صفت overflow برای زمانی که میخواهید کنترل بهتری روی طرح و layout یک صفحه وب داشته باشید، استفاده کنید. صفت overflow مشخص میکند که اگر محتوای یک باکس از آن سرریز کند، چه اتفاقی باید بیفتد.
div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}
خودتان امتحان کنید

overflow: hidden

زمانی که صفت overflow را با مقدار hidden مقدار دهی میکنیم، محتوای اضافی چیده میشود و آن قابل نمایش برای کاربر نیست :

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

 

div {
    overflow: hidden;
}
خودتان امتحان کنید

overflow: scroll

تنظیم صفت overflow با مقدار scroll به این معناست که محتوای اضافی چیده میشود و یک نوار پیمایش به صفحه اضافه خواهد شد که بتوان این محتوای اضافه را مشاهده نمود. دقت داشته باشید که در اینجا نوار پیمایش افقی و عمودی هر دو به عنصر اضافه خواهند شد حتی اگر شما به آنها احتیاج نداشته باشید.

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

 

div {
    overflow: scroll;
}
خودتان امتحان کنید

overflow: auto

مقدار auto بسیار شبیه مقدار scroll است. تنها تفاوت این است که نوار های پیمایش در صورت نیاز به عنصر اضافه خواهند شد :

شما میتوانید از صفت overflow برای زمانی که میخواهید کنترل بهتری روی طرح و layout یک صفحه وب داشته باشید، استفاده کنید. صفت overflow مشخص میکند که اگر محتوای یک باکس از آن سرریز کند، چه اتفاقی باید بیفتد.
div {
    overflow: auto;
}
خودتان امتحان کنید

overflow-x و overflow-y

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

  • overflow-x مشخص میکند که با محتوای اضافه در لبه های راست و چپ عنصر چکار باید کرد.
  • overflow-y مشخص میکند که با محتوای اضافه در لبه های بالا و پایین عنصر چکار باید کرد.
div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}
خودتان امتحان کنید

 

منتشر شده در ۲۲ شهریور ۱۳۹۶ حمید رضا ملکی ۱۰۸۹ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید