آموزش سرریز OverFlow در css

حامد محمدیحامد محمدی
98 بازدید
آموزش overflow

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

در اینجالت بخشی از متن یا تصویر از عنصر بیرون خواهد زد.

این اتفاق سرریز یا overflow نامیده می شود.

در آموزش امروز قصد داریم این مبجث را با هم مرور کنیم. با نحوه کدنویسی و تعیین ویژگی های این گزینه آشنا شویم.

همراه ما باشید.

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرج

در ادامه سری آموزش های css، امروز با مبحث سرریز overflow آشنا خواهیم شد.

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

در این صورت محتوای شما ، از المان نگهدارنده بیرون خواهد زد.

سرریز تصویر از قاب OVERFLOW

سرریز OVERFLOW تصویر از قاب


سرریز متن از قاب

سرریز OVERFLOW متن از قاب

سرریز overflow

ویژگی سرریزoverflow، در مواردی مانند بالا به کمک شما می آید.

این خاصیت تعیین می کند که محتوای سرریز شده، نمایش داده شود یا نه. و در صورت نمایش داده شدن، چطور نمایش داده شود.

[cdb_icon_box icon_style=”icon-font” icon=”fa fa-pencil-square-o” icon_position=”top” icon_type=”circle” icon_size=”icon-box-medium” title=”دقت کنید:” title_text_transform=”” title_text_font_weight=”” icon_color=”#1e73be” icon_border_color=”#e8bbae”]حالت سرریز تنها برای عناصری که از نوع block هستند اتفاق می افتد.

میتوانید درباره عناصر block از اینجا مطالعه کنید.[/cdb_icon_box]

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

۱-visible: این حالت که پیشفرض css نیز هست، باعث می شود محتوای سرریز شده نمایش داده شود.

مثال:
[php]
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
[/php]
نتیجه را ببینید.
۲- hidden: در این حالت محتوای سرریز شده نمایش داده نمی شود.

مثال:
[php]
div {
overflow: hidden;
}
[/php]
نتیجه را ببینید.

۳- scroll: این حالت باعث میشود، عنصر نگهدارنده محتوا، دارای نوارهای اسکرول باشد. بخش های سرریز محتوا توسط نوارهای پیمایش قابل مشاهده خواهند بود.

مثال:
[php]
div {
overflow: scroll;
}
[/php]
نتیجه را ببینید.

۴- auto: اگر از حالت scroll استفاده کنید، چه محتوای شما سرریز کند چه نکند، نوارهای اسکرول در اطراف عنصر والد نمایش داده خواهند شد. ای وضعیت چندان جالب به نظر نمی رسد! برای حل این مشکل میتوانید از خاصیت auto استفاده کنید. در این حالت تنها زمانی نوارهای پیمایش پدیدار میشوند که محتوا سرریز کرده باشد.

مثال:
[php]
div {
overflow: auto;
}
[/php]
نتیجه را ببینید.

overflow-x و overflow-y

این دو مقدار برای تعیین عملکرد مرورگر در حالت های سرریز افقی overflow-x و سرریز عمودی overflow-y استفاده می شوند.

در حالت افقی تعیین میشود که لبه های راست/چپ محتوا چطور نمایش داده شوند.

و در حالت عمودی تعیین می شود  لبه های بالا/پایین محتوا چطور نمایش داده شود.

مثال:
[php]
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
[/php]
نتیجه را ببینید.

درباره سرریز overflow بیشتر بخوانید و تمرین انجام دهید.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت