سرریز (Overflow)
«سرریز (Overflow)» یعنی وقتی محتوا از جعبه بیرون می زند چه کار کنیم. می توانیم مخفی کنیم، یا اسکرول بدهیم، یا آزاد بگذاریم. این انتخاب روی چیدمان و خوانایی اثر دارد.
تعریف ویژگی سرریز (Overflow)
ویژگی overflow کنترل می کند محتوا پس از پرشدنِ فضا چه رفتاری داشته باشد. مقدارهای مهم: visible، hidden، scroll و auto.
نمونه کلی: افزودن اسکرول در سرریز
<style>
#box {
width: 220px;
height: 80px;
border: 1px solid #888;
overflow: auto;
}
</style>
<div id="box">متن طولانی... متن طولانی... متن طولانی... متن طولانی...</div>
overflow: visible؛ نمایش آزاد
حالت پیش فرض «قابل نمایش» است. محتوا بیرون می ریزد و دیده می شود.
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
</style>
<div>محتوا بیرون از جعبه هم نمایش داده می شود.</div>
overflow: hidden؛ برش و مخفی سازی
در این حالت محتوا برش می خورد و بقیه پنهان می شود. اسکرول هم نمی آید.
<style>
div {
width: 200px;
height: 65px;
overflow: hidden;
}
</style>
<div>بخش اضافه مخفی می شود.</div>
overflow: scroll؛ همیشه اسکرول
اینجا همیشه اسکرول بار هست؛ حتی وقتی محتوا جا می شود.
<style>
div {
width: 200px;
height: 65px;
overflow: scroll;
}
</style>
<div>همیشه اسکرول موجود است.</div>
overflow: auto؛ اسکرولِ فقط وقتی لازم است
مشابه scroll است؛ اما اسکرول فقط در صورت نیاز می آید.
<style>
div {
width: 200px;
height: 65px;
overflow: auto;
}
</style>
<div>اسکرول فقط هنگام سرریز ظاهر می شود.</div>
کنترل محور: overflow-x و overflow-y
می توان سرریز را جداگانه برای افقی یا عمودی تنظیم کرد. این کار کنترل بهتری می دهد.
<style>
div {
width: 220px;
height: 80px;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
<div>اسکرول فقط عمودی است؛ افقی پنهان می شود.</div>
نکته: برای جدول ها یا کدهای عریض، می توان فقط overflow-x را اسکرولی کرد تا صفحه نشکند. برای لایه بندی پیشرفته هم به شاخص Z سر بزن.
گام های عملی
- عرض و ارتفاع ظرف را مشخص کن.
- یکی از مقادیرِ سرریز را روی ظرف بگذار.
- با متن طولانی تست کن و نتیجه را ببین.
جمع بندی سریع
visibleمحتوا را آزاد می گذارد.hiddenمحتوا را برش می دهد.scrollهمیشه اسکرول نشان می دهد.autoاسکرول را هوشمند می آورد.overflow-x/yکنترل محوری می دهد.