CSS Overflow & Clipping Property Kya Hai?

1. The overflow Property

CSS ki overflow property yeh control karti hai ki jab kisi element ka content uske defined box (width/height) se bahar nikal jaata hai, toh uske saath kya karna hai. Yeh layout ko maintain karne aur unwanted content ko handle karne ke liye bohot important hai.

A. overflow: visible; (Default)

Yeh default value hai. Isme content element ke box se bahar dikhta hai aur doosre elements par overlap kar sakta hai.

.box { overflow: visible; }

B. overflow: hidden;

Yeh extra content ko clip (kaat) deta hai aur use hide kar deta hai. Koi scrollbar nahi dikhti.

.box { overflow: hidden; }

C. overflow: scroll;

Yeh hamesha horizontal aur vertical scrollbars add kar deta hai, chahe content overflow ho raha ho ya nahi.

.box { overflow: scroll; }

D. overflow: auto;

Yeh sabse smart option hai. Yeh scrollbars sirf tabhi add karta hai jab unki zaroorat ho (jab content sach me overflow ho raha ho).

.box { overflow: auto; }

2. The clip-path Property

clip-path property ek powerful tool hai jo kisi element ke visible area ko ek specific shape me clip karne ki suvidha deti hai. Isse aap non-rectangular shapes (jaise circle, polygon) bana sakte hain.

A. circle()

Element ko circular shape me clip karta hai.

.element { clip-path: circle(50% at 50% 50%); }

B. polygon()

Multiple points define karke custom shapes (jaise triangle, star) banane deta hai.

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

3. Bonus: text-overflow

Jab ek hi line ka text apne container se bahar chala jaata hai, tab text-overflow: ellipsis; property uske aage "..." laga deti hai.

Iske kaam karne ke liye white-space: nowrap; aur overflow: hidden; properties ka hona zaroori hai.

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

Key Takeaways

• overflow: auto; ka use karna best practice hai scrollable content ke liye.
• overflow: hidden; extra content ko hide karne ke liye use hota hai.
• clip-path se aap elements ko interesting shapes (circle, polygon, etc.) me clip kar sakte hain.
• Single-line text ko handle karne ke liye text-overflow: ellipsis; ek accha solution hai.