overflow در CSS
ویژگی overflow تعیین می کند که محتوایی که از مرزهای عنصر خارج می شود, نمایش داده شود یا نه. و همچنین چگونگی نمایش را نیز تعیین می کند.
مقادیر خاصیت overflow
این خاصیت، چهار مقدار زیر رو قبول می کنه:
- visible
- hidden
- scroll
- auto
overflow: visible; overflow: hidden; overflow: scroll; overflow: auto; overflow: inherit;
در حالت عادی اگر عنصری عرض و ارتفاع ثابت نداشته باشد با افزایش و بزرگ شدن محتوای آن, عنصر نیز در دو جهت ارتفاع و عرض گسترش پیدا می کند. در این حالت محتوای عنصر دچار سرریز نخواهد شد.
اما اگر در جهتی (چه افقی, چه عمودی و چه هردو) اندازه عنصر ثابت باشد, آن زمان اگر محتوای عنصر بیشتر از فضای آن باشد, محتوا دچار سرریز می شود.
تعیین ارتفاع و عرض ثابت می تواند از طریق ویژگی هایheight وwidth تعیین شود و همچنین می تواند با استفاده از position و تعیین مختصات برای عنصر انجام شود.
حالا به تشریح کاربرد هرکدوم از مقادیر بالا می پردازیم.
مقدار visible
مقدار visible، مقدار پیش فرضی هست که خاصیت overflow مختص به هر عنصر داره و طبق اون، محتوای یک عنصر، محدود به ابعاد عنصر مورد نظر نیست.
به عبارتی، اگه ابعاد عنصر کوچیک بشه، محتوای عنصر کوچیک نمیشه و از محدوده عنصر خارج میشه.
<div id=”parent”>
<img src=”flower.jpg”>
<span> <!– متن لورم اپسوم –> </span>
</div>
#parent{
width:200px;
height:200px;
border:2px solid gray;
overflow: visible; }
همونطور که میبینیم، متن مورد نظر از مرز های عنصر پدر، هم در راستای عمودی و هم افقی، بیرون زده و مقدار visible تاثیری روی اصلاح این بیرون زدگی نداشته.
درواقع استفاده از مقدار visible، فرقی با زمانی که از خاصیت overflow استفاده نکنیم، نداره.
نکته: محتوایی که از عنصر پدر بیرون میزنه، تاثیری رو جابه جایی عناصر دیگه نداره.
مقدار hidden
وظیفه مقدار hidden، همونطور که از اسمش پیداس، پنهان کردن بیرون زدگی محتوا از عنصر پدر هست.
کد CSS مثال فوق رو به شکل زیر تغییر میدیم:
#parent{ width:200px;
height:200px;
border: 2px solid gray;
overflow: hidden; }
کاربرد این مقدار، زمانی هست که ما نمیخوایم محتوا به صورت کامل برای کاربر به نمایش دربیاد.
برای همین به خلاصه ای از اون محتوا بسنده میکنیم و توسط یه لینک، کاربر رو برای مطالعه کامل محتوا راهنمایی میکنیم.
مقدار scroll
این مقدار، برای ما قابلیت اسکرول کردن رو برای هر حجمی از محتوا به وجود میاره، حتی اگه عنصر پدر خالی داشته باشیم.
بیاین کد رو تغییر بدیم:
#parent{ width:200px;
height:200psx;
border: 2px solid gray;
overflow: scroll;
}
میبینیم که به خاطر عرض بالای عکس، و ارتفاع متن، در راستای افقی و عمودی، scroll bar به وجود اومده.
اگه براتون ابهام یا سوالی در مورد مطالب پیش اومد، حتما در قسمت نظرات بیان کنین. ما پاسخگو هستیم 🙂
مقدار auto
این مقدار شباهت زیادی به مقدار scroll داره، با این تفاوت که قابلیت اسکرول رو تنها زمانی به وجود میاره که بهش نیاز داریم.
به مثال زیر توجه کنین:
#parent1{ width:200px;
height:200psx;
border: 2px solid gray;
overflow: auto;
}
#parent2{
width:200px;
height:200psx;
border: 2px solid gray;
overflow: auto; }
هردوی عناصر پدر بالا،دارای دستور overflow:auto هستن. اما همونطور که میبینیم، تو عنصر دوم با محتوای کمتری سر و کار داریم.
به همین خاطر، قابلیت اسکرول برای عنصر دوم به وجود نیومده.
اسکرول افقی و اسکرول عمودی
تو مثال هایی که باهم دیدیم، خاصیت overflow هم در راستای افقی تاثیر میذاشت و هم در راستای عمودی.
برای مثال، اگه قرار بود محتوایی از عنصر پدر بیرون نزنه، هم در راستای افقی جلوش گرفته می شد و هم در راستای عمودی.
ما نمیخوایم زمانی که از دستور overflow:hidden استفاده می کنیم، بیرون زدگی افقی پنهان بشه، و فقط میخوایم در راستای عمودی این اتفاق بیفته.
چی کار کنیم؟ کافیه از خاصیت های overflow-x و overflow-y استفاده کنیم.
تو مثال زیر، کدی نوشتیم که به ما کمک می کنه اسکرول در راستای افقی رو حذف کنیم و به جاش، اسکرول عمودی رو فعال کنیم:
#parent{
width:200px;
height:200px;
border: 2px solid gray;
overflow-y: scroll;
overflow-x: hidden; }
نتیجه گیری
در این مقاله، با خاصیت overflow آشنا شدیم و دیدیم که میتونیم با استفاده از این خاصیت، بیرون زدن محتوا از عناصرمون رو کنترل کنیم.
این خاصیت ۴ مقدار اصلی رو قبول میکنه که عبارتند از :
- visible:حالت پیش فرض (محتوا از عنصر بیرون میزنه)
- hidden: قسمتی از محتوا متناسب با ابعاد عنصر پنهان میشه.
- scroll: برای محتوای داخل عنصر، اسکرول بار به وجود میاد.
- auto: برای محتوای داخل عنصر، اسکرول بار به وجود میاد. (در صورتی که محتوا بخواد از عنصر بیرون بزنه)
در نهایت، با دو خاصیت دیگه overflow-x و overflow-y روبرو شدیم و دیدیم که میتونیم توسط اون ها، از قابلیت های خاصیت overflow، فقط در راستا های عمودی و افقی استفاده کنیم.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده: حانیه گل لاله کرمانی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.