CSS Overflow — hidden, scroll, auto with Examples

The overflow Property

The overflow property controls what happens when content is too large to fit in its container. It applies to block-level elements with a defined height.

Value	Behavior
`visible`	Default - content overflows outside the box, no clipping
`hidden`	Content is clipped, no scrollbar shown
`scroll`	Always shows scrollbars (even if not needed)
`auto`	Shows scrollbars only when content overflows (recommended)
`clip`	Like hidden but disables programmatic scrolling

overflow, overflow-x, overflow-y

/* Scrollable container */
.scroll-box {
    height: 200px;
    overflow: auto;       /* scrollbar only when needed */
    border: 1px solid #dee2e6;
    padding: 16px;
}

/* Horizontal scroll only */
.code-block {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;  /* prevent line wrapping */
}

/* Hide overflow - clip content */
.card-image {
    overflow: hidden;
    border-radius: 8px;
}
.card-image img {
    width: 100%;
    transition: transform 0.3s;
}
.card-image:hover img {
    transform: scale(1.05);  /* zoom effect, clipped by overflow:hidden */
}

/* Responsive table */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* smooth scroll on iOS */
}

/* Clearfix using overflow */
.clearfix { overflow: auto; }  /* contains floated children */

/* Sticky scroll container */
.sticky-container {
    height: 400px;
    overflow-y: scroll;
    scroll-behavior: smooth;  /* smooth scrolling */
}

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

Text Overflow

text-overflow, overflow-wrap, word-break

/* Single-line truncation with ellipsis */
.truncate {
    white-space: nowrap;      /* prevent wrapping */
    overflow: hidden;         /* clip overflow */
    text-overflow: ellipsis;  /* show ... at end */
    max-width: 200px;
}

/* Multi-line truncation (WebKit) */
.clamp-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* overflow-wrap - break long words */
.long-word {
    overflow-wrap: break-word;  /* break word if too long */
    word-break: break-word;     /* older equivalent */
}

/* word-break */
.break-all  { word-break: break-all; }   /* break anywhere */
.keep-all   { word-break: keep-all; }    /* no breaks (CJK text) }

/* hyphens - add hyphens when breaking */
.hyphenate {
    hyphens: auto;
    overflow-wrap: break-word;
    lang: en;  /* needs lang attribute on HTML element */
}