زمانی که محتوای یک عنصر بزرگ تر از فضایی است که آن عنصر در اختیار دارد، می توانیم از ویژگی Overflow استفاده کنیم. با استفاده از ویژگی می توانیم محتوای اضافه را به اسکرول اضافه کرد، در این مقاله قصد داریم ویژگی Overflow را به طور کامل به شما عزیزان آموزش دهیم، همراه داتیس نتورک باشید.
ویژگی Overflow
زمانی که محتوای یک عنصر بزرگ تر از فضایی است که آن عنصر در اختیار دارد، می توانیم از Overflow استفاده کنیم.
با استفاده از این ویژگی می توانیم محتوای اضافه را چید و یا اسکرول به آن عنصر اضافه کنیم تا بتوانیم محتوای اضافه را با پیمایش مشاهده کنیم.
Overflow دارای چهار مقدار زیر است:
- visible: مقدار پیشفرض، محتوای اضافه چیده نمی شود و محتوای اضافی در بیرون از باکس نمایش داده می شود.
- hidden: محتوای اضافی چیده می شود و این محتوای اضافی برای کاربران قابل مشاهده نخواهد بود.
- scroll: محتوای اضافی چیده می شود، اما نوار پیمایش به عنصر اضافه می شود تا بتوانیم محتوای اضافی را با پیمایش مشاهده کنیم.
- auto: محتوای اضافی چیده می شود و نوار پیمایش در صورت نیاز به عنصر اضافه می شود.
نکته: ویژگی Overflow تنها برای عناصر Block که دارای ارتفاع مشخص هستند کار می کند.
overflow: visible در ویژگی Overflow
به صورت پیشفرض Overflow دارای مقدار Visible است.
و این به این معنا است که محتوای اضافی چیده نمی شود و خارج از باکس عنصر مورد نظر نمایش داده می شود.
مثال:
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden در ویژگی Overflow
زمانی که ویژگی Overflow را با مقدار Hidden مقدار دهی می کنیم، محتوای اضافی چیده می شود و آن قابل نمایش برای کاربر نیست.
مثال:
div { overflow: hidden; }
overflow: scroll در ویژگی Overflow
تنظیم ویژگی Overflow با مقدار Scroll به این معنا است که محتوای اضافی چیده می شود و یک نوار پیمایش به صفحه اضافه خواهد شد که بتوانیم این محتوای اضافه را مشاهده کنیم.
نکته: در overflow: scroll اسکرول افقی و عمودی هر دو به عنصر اضافه خواهند شد حتی اگر شما به آنها احتیاج نداشته باشید.
مثال:
div {
overflow: scroll;
}
overflow: auto
مقدار Auto بسیار به مقدار Scroll تشابه دارد.
تنها تفاوت بین این دو این است که اسکرول در صورت نیاز به عنصر اضافه خواهد شد.
مثال:
div { overflow: auto; }
overflow-x and overflow-y
از overflow-x و overflow-y برای مشخص کردن چیده شدن و یا چیده نشدن محتوای اضافی استفاده می شود.
- overflow-x مشخص می کند که با محتوای اضافه در لبه های راست و چپ عنصر چکار باید کرد.
- overflow-y مشخص می کند که با محتوای اضافه در لبه های بالا و پایین عنصر چکار باید کرد.
مثال:
div { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ }
امیدوارم این مقاله مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی دنبال کنید.
