آموزش سرریزoverflow در css به همراه توضیحات تصویری و کدنویسی و تمرینات

سرریز 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 میتواند مقادیر زیر را داشته باشد:

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

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

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

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

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

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

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