ویژگی overflow در CSS
ویژگی overflow، رفتار المان در برابر سرریز محتوا را مشخص می کند.
در این المان سرریز رخ داده است.
در این المان سرریز رخ داده است.
در این المان سرریز رخ داده است.
در این المان سرریز رخ داده است.
در این المان سرریز رخ داده است.
در این المان سرریز رخ داده است.
در این المان سرریز رخ داده است.
نکته: اگر المان را به عنوان لیوان و محتوای داخل آن را آب در نظر بگیریم، سرریز آب زمانی رخ می دهد که حجم آب بیشتر از ظرفیت لیوان باشد. به عبارت دیگر بیشتر بودن اندازه محتوای داخل المان از عرض یا ارتفاع المان، باعث سرریز می شود.
برای سرریز محتوای المان:
- در مثال لیوان و آب، اگر حجم لیوان بسته به مقدار آب افزایش یابد، هیچگاه سرریز رخ نمی دهد. بنابراین برای سرریز در المان حتما باید عرض یا ارتفاع لیوان مشخص شود، تا با تغییر محتوا، المان بزرگتر نشود.
- برای سرریز حتما باید محتوای داخل المان بیشتر از حجم المان باشد.
- ویژگی overflow برابر scroll یا auto قرار بگیرد.
ویژگی overflow، چهار مقدار دریافت می کند:
- visible: سرریز محتوا بدون اسکرول بار (نوار پیمایشی) از المان بیرون می ریزد. (پیش فرض)
- hidden: سرریز محتوا بریده و پنهان می شود.
- scroll: سرریز محتوا با اسکرول بار (نوار پیمایشی) نمایش داده می شود. حتی اگر سرریز نداشته باشیم، نوار پیمایشی نمایش داده می شود.
- auto: به صورت خودکار بر اساس سرریز از scroll و hidden استفاده می کند.
مقدار visible ویژگی overflow در CSS
مقدار visible، سرریز محتوا را بدون اسکرول بار (نوار پیمایشی) نمایش می دهد و محتوا از المان بیرون می ریزد و آن را نمایش می دهد.
overflow: visible;
overflow: visible;
overflow: visible;
overflow: visible;
overflow: visible;
overflow: visible;
overflow: visible;
overflow: visible;نکته: مقدار visible، مقدار پیش فرض overflow است.
مقدار hidden ویژگی overflow در CSS
مقدار hidden، سرریز محتوا را بریده و پنهان می کند.
overflow: hidden;
overflow: hidden;
overflow: hidden;
overflow: hidden;
overflow: hidden;
overflow: hidden;
overflow: hidden;
overflow: hidden;مقدار scroll ویژگی overflow در CSS
مقدار scroll باعث نمایش اسکرول بار (نوار پیمایشی) می شود.
- اگر المان سرریز داشته باشد، نوار پیمایشی نمایش داده می شود و کاربر قابلیت اسکرول کردن را دارد.
- اگر المان سرریز نداشته باشد، نوار پیمایشی به صورت غیر فعال نمایش داده می شود.
overflow: scroll;
overflow: scroll;
overflow: scroll;
overflow: scroll;
overflow: scroll;
overflow: scroll;
overflow: scroll;
overflow: scroll;مقدار auto ویژگی overflow در CSS
مقدار auto، به صورت خودکار بر اساس سرریز از حالت scroll و hidden استفاده می کند.
overflow: auto;
overflow: auto;
overflow: auto;
overflow: auto;
overflow: auto;
overflow: auto;
overflow: auto;
overflow: auto;نکته: مقدار auto، برخلاف مقدار scroll، اگر نیاز به سرریز نباشد، اسکرول بار (نوار پیمایشی) را نمایش نمی دهد.
نکته
در مثال لیوان و آب، اگر حجم لیوان بسته به مقدار آب افزایش یابد، هیچگاه سرریز رخ نمی دهد. بنابراین برای سرریز در المان حتما باید عرض یا ارتفاع مشخص شود، تا با تغییر محتوا، المان بزرگتر نشود.
overflow: auto;
height: 60px;نکته: همانطور که در نمونه کد بالا مشاهده کردید، با مشخص کردن یا نکردن ارتفاع، سرریز تغییر می کند.
مقادیر overflow-x و overflow-y در CSS
ویژگی overflow، خلاصه ی دو ویژگی است:
- ویژگی overflow-x برای سرریز افقی
- ویژگی overflow-y برای سرریز عمودی
overflow-x: hidden;
overflow-y: scroll;ویژگی overflow را نیز می توان با دو مقدار نوشت.
overflow: x y;overflow: hidden scroll;نکته: ویژگی overflow با یک مقدار، باعث اعمال شدن آن مقدار در دو جهت افقی و عمودی می شود.
اسکرول افقی در CSS
اسکرول افقی (چپ به راست) همانند اسکرول عمودی است. توجه کنید محتوای افقی المان باید از عرض المان بزرگ تر باشد.
نکته: اگر المان شامل متن باشد، برای جلوگیری از شکسته شدن خط باید از ویژگی text-wrap: nowrap; استفاده کنیم.
overflow-x: auto;خلاصه درس
در این درس با ویژگی overflow در CSS:
- ویژگی overflow
- مقدار visible
- مقدار hidden
- مقدار scroll
- مقدار auto
- اسکرول افقی
- ویژگی text-wrap
آشنا شدیم.
احسان اسلامی
