CSS The overflow Property
🔧 نحوه استفاده (سینتکس):
“`css
selector {
overflow: visible | hidden | scroll | auto | clip;
}
“`
—
💡 مقادیر قابل استفاده برای overflow
| مقدار | توضیح |
| ——— | ————————————————————————— |
| `visible` | پیشفرض. محتوای اضافی از جعبه بیرون میزند و قابل مشاهده است. |
| `hidden` | محتوای اضافی بریده میشود و نمایش داده نمیشود. |
| `scroll` | همواره نوار اسکرول نشان داده میشود، چه محتوا اضافه باشد چه نباشد. |
| `auto` | نوار اسکرول فقط زمانی که لازم باشد (یعنی محتوا اضافه باشد) ظاهر میشود. |
| `clip` | مثل `hidden` است اما هیچ امکان اسکرولی ارائه نمیدهد. |
—
📦 ویژگیهای محور افقی و عمودی
شما میتوانید کنترل overflow را برای هر محور بهصورت جداگانه انجام دهید:
* `overflow-x`: کنترل overflow در محور افقی
* `overflow-y`: کنترل overflow در محور عمودی
“`css
.container {
overflow-x: auto;
overflow-y: hidden;
}
“`
—
🧪 مثال
“`html
<div class=“box”>
این یک پاراگراف طولانی است که درون این باکس کوچک جا نمیگیرد.
</div>
<style>
.box {
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid #000;
}
</style>
“`
در این مثال، اگر متن از باکس خارج شود، نوار اسکرول ظاهر خواهد شد تا بتوان محتوای کامل را دید.
دیدگاهتان را بنویسید