Overflow در CSS
می‌توانید به جعبه اندازهٔ ثابت بدهید. اگر محتوا بلندتر یا پهن‌تر از آن جعبه باشد چه؟ overflow تصمیم می‌گیرد محتوای اضافه بیرون بریزد، بریده شود، یا قابل‌اسکرول شود.
کلیدواژه‌ها یک‌نگاهه
📊 مقادیر رایج overflow
| مقدار | معنی روزمره |
|---|---|
visible (پیش‌فرض) |
محتوای اضافه می‌تواند بیرون جعبه بریزد |
hidden |
محتوای اضافه بریده می‌شود؛ نوار اسکرول نیست |
scroll |
نوار اسکرول نشان داده می‌شود (اغلب حتی اگر لازم نباشد) |
auto |
نوار اسکرول فقط وقتی محتوا سرریز کند ظاهر می‌شود |
پیش‌فرض: محتوا می‌تواند بریزد
با overflow: visible (پیش‌فرض)، محتوای بلند ممکن است بیرون لبه‌های جعبه کشیده شود.
Overflow دیدنی (پیش‌فرض)
css.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}با hidden ببُرید
overflow: hidden هرچه جا نشود را قطع می‌کند. برای لبه‌های تمیز مفید است — ولی کاربر نمی‌تواند بقیه را اسکرول کند.
Hidden سرریز را می‌بُرد
css.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}با scroll همیشه نوار اسکرول
overflow: scroll جعبه را قابل‌اسکرول می‌کند و معمولاً حتی وقتی محتوا جا می‌شود هم جای نوار اسکرول را نگه می‌دارد.
همیشه scroll
css.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}auto — اسکرول فقط وقتی لازم است
overflow: auto انتخاب آرام روزمره برای پنل‌هاست: وقتی محتوا سرریز کند نوار می‌آید، و وقتی جا شود اغلب مزاحم نیست.
auto وقتی لازم است
css.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}یک محور را جدا کنترل کنید
با overflow-x و overflow-y رفتار افقی و عمودی را جدا کنید — مثلاً اسکرول عمودی بگذارید ولی سرریز افقی را ببُرید.
اسکرول عمودی، برش افقی
css.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}عادت کاربردی پنل
به جعبه ارتفاع واقعی بدهید (یا max-height)، بعد برای ناحیهٔ خوانا و قابل‌اسکرول auto بگذارید.
پنل یادداشت قابل‌اسکرول
css.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}خودتان امتحان کنید
- جعبه‌ای با
widthوheightکوتاه بسازید و چند پاراگراف داخلش بگذارید. overflowرا بینvisible،hidden،scrollوautoعوض کنید.- روی یک خط پهن،
overflow-x: hiddenوoverflow-y: autoبگذارید. .note-panelباmax-heightبسازید و ببینید نوار فقط وقتی لازم است می‌آید.- بدون محدودیت height (یا max-height) اغلب overflow چیزی برای محدود کردن ندارد.
اشتباهات رایج
- انتظار اثر overflow بدون محدودیت height یا width
- همه‌جا
scrollگذاشتن وقتیautoآرام‌تر است - قاطی کردن overflow (سرریز جعبه) با text-overflow (سه‌نقطه روی متن — ابزار بعدی)
- با
hiddenبریدن و فراموش کردن که کاربر شاید به بقیه نیاز داشته باشد - فکر کردن که overflow حساب box-sizing را عوض می‌کند (نمی‌کند)
خلاصه
- Overflow سرریز، برش و اسکرول را وقتی محتوا از جعبه بزرگ‌تر است کنترل می‌کند
- پیش‌فرض
visibleاست؛hiddenمی‌بُرد؛scrollهمیشه نوار می‌دهد؛autoوقتی لازم است - معمولاً اندازهٔ محدود (height / max-height / width) لازم است تا اثر را ببینید
overflow-xوoverflow-yمحورها را جدا می‌کنند- برای خیلی از پنل‌ها،
overflow: autoعادت آرام است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود