ویژگی Overflow در CSS

ویژگی Overflow در CSS: مدیریت سرریز محتوا در طراحی

ویژگی overflow در CSS تعیین می‌کند که وقتی محتوای یک عنصر از محدوده آن فراتر می‌رود، چگونه رفتار کند. این ویژگی برای طراحی‌های ریسپانسیو و جلوگیری از به‌هم‌ریختگی طراحی بسیار مفید است.

ساختار:

selector {

}

مقادیر:

1- visible (پیش‌فرض):

محتوا برش نمی‌خورد و ممکن است از محدوده عنصر خارج شود.
هیچ اسکرول‌باری اضافه نمی‌شود.

.example {

overflow: visible;

}

2- hidden:

محتوا برش داده می‌شود و از محدوده عنصر خارج نمی‌شود.
اسکرول‌بار اضافه نمی‌شود و محتوای برش‌خورده قابل دسترسی نیست.

.example {

overflow: hidden;

}

3- scroll:

اسکرول‌بارها همیشه اضافه می‌شوند، حتی اگر محتوایی برای اسکرول وجود نداشته باشد.
اسکرول‌بار افقی و عمودی ممکن است ظاهر شوند.

.example {

overflow: scroll;

}

4- auto:

فقط در صورتی که محتوا از محدوده عنصر خارج شود، اسکرول‌بار اضافه می‌شود.
این گزینه برای طراحی‌های ریسپانسیو بسیار مناسب است.

.example {

overflow: auto;

}

5- clip:

محتوا بدون اضافه‌کردن اسکرول‌بار برش داده می‌شود و غیرقابل دسترسی است.

موارد استفاده عملی:

جلوگیری از به‌هم‌ریختگی طراحی: از overflow: hidden; برای جلوگیری از به‌هم‌ریختگی طرح‌ها استفاده کنید.
ایجاد بخش‌های قابل اسکرول: برای نواحی که نیاز به اسکرول دارند از overflow: auto; یا overflow: scroll; استفاده کنید.
ایجاد افکت‌های برش: از clip برای طراحی‌های خلاقانه و برش محتوای اضافی استفاده کنید.

مثال:

<p>این یک مثال برای مدیریت سرریز در CSS است.</p>

</div>

<style>

.container {

width: 200px;

height: 100px;

border: 1px solid #ccc;

overflow: auto; /* مقادیر دیگر: visible، hidden، scroll */

}

</style>