Clipping Content

Clipping Content

When content overflows its container, you need to decide what to do with it. CSS gives you several properties to clip, scroll, or hide overflow content.

The overflow Property

.container {
    width: 300px;
    height: 200px;
    overflow: hidden;  /* Clip everything that overflows */
}

overflow Values

Value	Behavior
visible (default)	Content overflows freely — no clipping
hidden	Overflow is clipped — invisible, no scrollbar
scroll	Always shows scrollbars (even if content fits)
auto	Shows scrollbar only when content actually overflows

Axis-Specific Overflow

.container {
    overflow-x: hidden;   /* Clip horizontal overflow */
    overflow-y: auto;     /* Scroll vertical overflow if needed */
}

/* Common pattern: horizontal scroll container */
.scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;  /* Prevent wrapping */
}

Scrollable Content Area

.chat-messages {
    height: 400px;
    overflow-y: auto;
    padding: 16px;
}

/* Custom scrollbar styling */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #555;
}

Text Overflow — Ellipsis

/* Single-line text truncation */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Result: "This is a very long text that gets trun..." */

Multi-Line Text Truncation

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

/* Truncates text after 3 lines with an ellipsis */

clip-path — Custom Clipping Shapes

clip-path clips an element to a specific shape:

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

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

/* Triangle */
.triangle {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

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

/* Diagonal cut */
.hero {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

clip-path Shapes

Function	Syntax	Example
circle()	circle(radius at center)	circle(50%)
ellipse()	ellipse(rx ry at center)	ellipse(50% 30%)
polygon()	List of x y coordinate pairs	polygon(0 0, 100% 0, 50% 100%)
inset()	inset(top right bottom left round radius)	inset(0 round 12px)

Animated clip-path

.reveal {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0.6s ease;
}

.reveal:hover {
    clip-path: circle(100% at 50% 50%);
}

/* The element reveals itself in a circular expansion from the center */

Practical Example: Card with Image Overflow

.card {
    border-radius: 12px;
    overflow: hidden;  /* Clips the image to the card's rounded corners */
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;  /* Cover the area without distortion */
}

.card-body {
    padding: 20px;
}

/* Without overflow: hidden, the image corners would 
   extend beyond the card's border-radius */

visibility vs display vs opacity vs clip

Property	Visual	Space	Events
display: none	Hidden	Removed	No events
visibility: hidden	Hidden	Preserved	No events
opacity: 0	Hidden	Preserved	Still clickable!
clip-path: circle(0)	Hidden	Preserved	No events
overflow: hidden	Clips overflow	Preserved	Normal

Key Takeaways

• overflow: hidden clips content that extends beyond the container
• overflow: auto adds scrollbars only when needed
• text-overflow: ellipsis truncates long text with "..."
• -webkit-line-clamp truncates multi-line text
• clip-path clips elements to circles, polygons, and custom shapes
• clip-path can be animated for reveal effects
• overflow: hidden on parent clips children to rounded corners