Text Effects in CSS ka use text ke behavior ko control karne ke liye hota hai, jaise overflow handle karna, words wrap karna, line break rules aur text ka direction set karna.
Isme mainly ye properties aati hain:
- text-overflow
- word-wrap
- word-break
- writing-mode
text-overflow Property
text-overflow property define karta hai ki jab text container ke bahar chala jaye to usse kaise show karna hai.
Ye do tarike se kaam karta hai:
- clip → extra text cut ho jata hai
- ellipsis → “…” show hota hai
Important: Isko use karne ke liye ye dono properties zaroori hain:
- white-space: nowrap;
- overflow: hidden;
Example
Hover Example
word-wrap Property
word-wrap property in text effects in CSS long words ko break karke next line me le aata hai, taaki layout break na ho.
Example
word-break Property
word-break decide karta hai ki words line ke end par kaise break honge.
Values:
- normal → default behavior
- break-all → har character par break ho sakta hai
- keep-all → words break nahi honge
Example
writing-mode Property
writing-mode define karta hai text horizontal ya vertical kaise flow karega.
Values:
- horizontal-tb → default (left to right)
- vertical-rl → top to bottom, right to left
- vertical-lr → top to bottom, left to right
Example
Text Effects in CSS text ke layout aur behavior ko control karne ke liye important hote hain.
In properties ka use karke aap overflow handle kar sakte ho, long words manage kar sakte ho aur text direction customize kar sakte ho, jisse UI clean aur readable ban jata hai.
