سرریز (Overflow)

آشنایی با overflow در CSS: hidden، scroll، auto و مدیریت محتوای سرریز شده

Overflow چیست؟

وقتی محتوای یک عنصر بیشتر از فضای آن است، سرریز (Overflow) می‌کند. ویژگی overflow تعیین می‌کند چه اتفاقی بیفتد.

مقادیر overflow

مقدارتوضیح
visibleنمایش داده می‌شود (پیش‌فرض)
hiddenمخفی می‌شود ⭐
scrollهمیشه اسکرول دارد
autoدر صورت نیاز اسکرول ⭐
clipمثل hidden اما بدون اسکرول

۱. Overflow: Hidden

محتوای اضافی کاملاً بریده می‌شود:

.box {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

۲. Overflow: Scroll

همیشه اسکرول‌بار نمایش داده می‌شود:

.box {
        height: 200px;
        overflow: scroll;
        /* در ویندوز اسکرول‌بار همیشه دیده می‌شود */
    }

۳. Overflow: Auto

فقط در صورت نیاز اسکرول‌بار نمایش داده می‌شود:

.box {
        height: 200px;
        overflow: auto;  /* اگر محتوا بلندتر باشد، اسکرول */
    }

overflow افقی و عمودی جداگانه

.box {
        overflow-x: hidden;  /* افقی مخفی */
        overflow-y: auto;    /* عمودی اسکرول */
    }

کاربردهای overflow

۱. متن کوتاه شده (Truncate)

.truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

۲. باکس اسکرول

.chat-box {
        height: 400px;
        overflow-y: auto;
    }

۳. clearfix با overflow

.container {
        overflow: hidden; /* یا auto */
        /* floatهای فرزندان را پاک می‌کند */
    }

۴. برش تصویر

.image-crop {
        width: 300px;
        height: 200px;
        overflow: hidden;
        border-radius: 12px;
    }
    .image-crop img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

text-overflow

مقدارتوضیح
clipبرش ساده (پیش‌فرض)
ellipsisسه نقطه (...) ⭐

اسکرول‌بار سفارشی

.custom-scroll::-webkit-scrollbar {
        width: 8px;
    }
    .custom-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
        background: #3498db;
        border-radius: 4px;
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
        background: #2980b9;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط