Clipping Content

Clipping Content

Sometimes elements have more content than their container can display. CSS gives you several ways to clip, hide, or control overflowing content.

The overflow Property

The overflow property controls what happens when content overflows its container:

Value	Behavior
visible	Content overflows and is visible outside the box (default)
hidden	Content is clipped — hidden parts are invisible
scroll	Scrollbars are always shown
auto	Scrollbars appear only when content overflows

overflow: hidden

.card {
    width: 300px;
    height: 200px;
    overflow: hidden;  /* Content beyond 200px is clipped */
    border-radius: 12px;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

This is perfect for creating cards with images that fill the space without distortion.

overflow: auto vs scroll

/* Scrollbar only appears when needed */
.scrollable {
    height: 300px;
    overflow: auto;
}

/* Scrollbar is always visible */
.always-scroll {
    height: 300px;
    overflow: scroll;
}

overflow-x and overflow-y

Control horizontal and vertical overflow independently:

.code-block {
    overflow-x: auto;    /* Horizontal scroll for wide code */
    overflow-y: hidden;  /* No vertical overflow */
    white-space: nowrap;
}

Text Overflow (Ellipsis)

Truncate text with an ellipsis (...) when it's too long:

.truncate {
    white-space: nowrap;     /* Prevent text wrapping */
    overflow: hidden;        /* Hide overflow */
    text-overflow: ellipsis; /* Show ... at the end */
    max-width: 250px;
}

Multi-Line Text Clipping

Limit text to a specific number of lines:

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;       /* Show 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

clip-path

The clip-path property lets you define a custom shape as the visible region:

/* Circle */
.avatar {
    clip-path: circle(50%);
}

/* Rounded rectangle */
.card {
    clip-path: inset(0 round 16px);
}

/* Custom polygon */
.banner {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Practical Examples

Use Case	Technique
Image cards	overflow: hidden + border-radius
Scrollable sidebar	overflow-y: auto + fixed height
Code blocks	overflow-x: auto
Truncated titles	text-overflow: ellipsis
Avatar circles	clip-path: circle(50%)
Diagonal section dividers	clip-path: polygon()

Key Takeaways

• overflow: hidden clips content outside the container
• overflow: auto adds scrollbars only when needed
• Use text-overflow: ellipsis to truncate long text with "..."
• clip-path creates custom-shaped visible areas
• Use -webkit-line-clamp for multi-line text truncation