با سلام خدمت شما همراهان همیشگی سایت پرنیان طرج
در ادامه سری آموزش های css، امروز با مبحث سرریز overflow آشنا خواهیم شد.
سرریزoverflow حالتی است که در آن متن یا تصویر قرار داده شده در صفحه وب سایت، از نگهدارنده خود بزرگتر باشد.
در این صورت محتوای شما ، از المان نگهدارنده بیرون خواهد زد.
سرریز overflow
ویژگی سرریزoverflow، در مواردی مانند بالا به کمک شما می آید.
این خاصیت تعیین می کند که محتوای سرریز شده، نمایش داده شود یا نه. و در صورت نمایش داده شدن، چطور نمایش داده شود.
میتوانید درباره عناصر 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]
نتیجه را ببینید.
overflow-x و overflow-y
این دو مقدار برای تعیین عملکرد مرورگر در حالت های سرریز افقی overflow-x و سرریز عمودی overflow-y استفاده می شوند.
در حالت افقی تعیین میشود که لبه های راست/چپ محتوا چطور نمایش داده شوند.
و در حالت عمودی تعیین می شود لبه های بالا/پایین محتوا چطور نمایش داده شود.
مثال:
[php]
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
[/php]
نتیجه را ببینید.