سرریز در CSS (CSS Overflow)
ویژگی «سرریز (Overflow)» تعیین می کند وقتی محتوای یک ناحیه جا نشود چه رخ دهد؛ می توانید آن را برش دهید یا اسکرول بار اضافه کنید. این کنترل ریز سرریز، چینش را قابل اعتمادتر می کند.
ویژگی overflow در یک نگاه
مقادیر رایج عبارت اند از: visible، hidden، scroll و auto. در ادامه هرکدام را با نمونه می بینیم. همچنین می توانید فقط محور افقی یا عمودی را با overflow-x و overflow-y کنترل کنید.
overflow: visible (پیش فرض)
محتوا برش نمی خورد و خارج از کادر عنصر نمایش داده می شود:
div { width: 200px; height: 65px; background-color: coral; overflow: visible; }overflow: hidden
سرریز بریده می شود و باقی محتوا پنهان می ماند:
div { overflow: hidden; }overflow: scroll
همیشه اسکرول بارها افزوده می شوند و کاربر باید پیمایش کند:
div { overflow: scroll; }overflow: auto
مشابه scroll است، اما فقط هنگام نیاز اسکرول بار نشان داده می شود:
div { overflow: auto; }کنترل محور: overflow-x و overflow-y
می توانید سرریز افقی یا عمودی را جداگانه تنظیم کنید. نمونه زیر افقی را مخفی و عمودی را قابل پیمایش می کند:
div { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ }نکته: هنگام کار با هم پوشانیِ عناصرِ موقعیت دار، از شاخص Z کمک بگیرید و در صورت نیاز رفتار «سرریز» را برای جلوگیری از روی هم افتادگی کنترل کنید. همچنین درباره نوع جای گذاری به position رجوع کنید.
- برای مطالعه دقیق تر «سرریز» در این راهنما جستجو کنید.
- برای جدول های عریض، کنترل محور افقی با جدول واکنش گرا مفید است.