CSS Text Effects — Shadow, Wrapping, Overflow सीखें
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
दुकान का signboard सोचिए। अक्षर बड़े हैं, धूप में हल्की छाया डालते हैं, और board के किनारे से कभी बाहर नहीं निकलते — बहुत लंबा दुकान का नाम भी सलीक़े से संभाल लिया जाता है। CSS text effects शब्दों पर वही क़ाबू देते हैं: छाया जो headings को background से ऊपर उठा देती है, नियम जो लंबे शब्दों को layout तोड़ने से रोकते हैं, और text जो किताब की रीढ़ की तरह सीधा खड़ा चलता है।
छाया जो text को पेज से उठा देती है
text-shadow चार तक values लेता है: horizontal offset, vertical offset, blur radius, और रंग। text-shadow: 2px 2px 4px rgba(0,0,0,0.3); हर अक्षर पर 2px दाईं ओर और 2px नीचे हल्की grey छाया डालता है। Comma से कई छाया जोड़ सकते हैं — ऊपर हल्की छाया और नीचे गहरी छाया से text page में खुदा हुआ लग सकता है। असली बात संयम है: एक हल्की छाया गहराई देती है, पाँच छाया बस गंदगी लगती हैं।
लंबे शब्द जो layout तोड़ देते हैं
आम तौर पर browser line सिर्फ़ space पर तोड़ता है। एक बहुत लंबा शब्द — लंबा link, username, या German का जोड़-शब्द — उसमें space नहीं होता, इसलिए वह अपने box से बाहर निकलकर पूरा layout तोड़ सकता है। overflow-wrap: break-word; (जिसे word-wrap के नाम से भी लिखा जाता है) browser को कहता है कि ज़रूरत पड़ने पर लंबा शब्द तोड़ा जा सकता है। उल्टी समस्या: headline जो एक ही line में रहनी चाहिए: white-space: nowrap; wrapping रोकता है, overflow: hidden; extra text काट देता है, और text-overflow: ellipsis; तीन बिंदु लगा देता है जो कहते हैं "आगे और है"।
बग़ल की ओर लिखना
writing-mode text के बहने की दिशा बदल देता है। writing-mode: vertical-rl; text को ऊपर से नीचे, दाईं से बाईं चलाता है — बिल्कुल वही जो side heading, vertical notice board, या किताब की रीढ़ के लिए चाहिए। Box खुद अपनी shape नहीं बदलता; सिर्फ़ उसके अंदर का text सीधा खड़ा हो जाता है।
text-overflow: ellipsis; तभी काम करता है जब तीनों टुकड़े मौजूद हों: white-space: nowrap;, overflow: hidden;, और element पर fixed width (या max-width)। कोई एक भी छूटा तो text आम तौर पर wrap होगा या overflow करेगा, बिना बिंदुओं के।overflow-wrap: break-word; comment boxes, chat messages, और हर उस जगह पर लगाइए जहाँ user type कर सकता है। User क्या type करेगा, इस पर आपका क़ाबू नहीं, लेकिन एक लंबा pasted link आपका पूरा page तोड़ दे, इस पर क़ाबू है।आम गलतियाँ
text-overflow: ellipsis;अकेला इस्तेमाल करना — बिनाnowrapऔरoverflow: hiddenके वह कुछ नहीं करता।- यह भूलना कि
text-shadowके offsets जोड़े में आते हैं — पहली value छाया को बग़ल में सरकाती है, दूसरी नीचे; उलट देने से छाया ग़लत दिशा में जाती है। - एक heading पर पाँच-छह छाया चढ़ाना — वह गंदा लगता है; एक हल्की छाया अक्सर ढेर से बेहतर होती है।
- हर जगह
word-break: break-all;इस्तेमाल करना — वह शब्द तब भी तोड़ देता है जब वह fit हो जाते, जिससे आम text पढ़ना मुश्किल हो जाता है;overflow-wrap: break-word;पसंद कीजिए। - यह उम्मीद करना कि
writing-modebox को घुमा देगा — वह सिर्फ़ text घुमाता है; box अपनी आम चौड़ाई और ऊँचाई रखता है।
याद रखें
text-shadow: x y blur रंग;text को background से ऊपर उठाता है; एक हल्की छाया तक रखिए।overflow-wrap: break-word;बहुत लंबे शब्दों को box से बाहर निकलने के बजाय तोड़ने देता है।white-space: nowrap;+overflow: hidden;+text-overflow: ellipsis;से तीन-बिंदु वाला effect मिलता है — तीनों ज़रूरी हैं।writing-mode: vertical-rl;side headings के लिए text ऊपर से नीचे चलाता है।- user के type किए content पर word-wrap लगाइए, ताकि एक लंबा link कभी layout न तोड़े।
उदाहरण समझिए
h1.shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }— बड़ी हरी heading को 2px दाईं ओर और 2px नीचे हल्की grey छाया मिलती है, जो उसे page से ऊपर उठा देती है।.long-word { overflow-wrap: break-word; }— पहले card में बहुत लंबा शब्द box से बाहर फटने के बजाय lines में टूट जाता है।.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }— दूसरे card में लंबी headline एक line में रहती है और तीन बिंदुओं पर ख़त्म होती है।.side { writing-mode: vertical-rl; }— गहरी "Notice Board" पट्टी अपना text ऊपर से नीचे चलाती है, जैसे किताब की रीढ़।.wrap { display: flex; }— vertical पट्टी और उसका paragraph बग़ल-बग़ल बैठते हैं, इसलिए side heading असली notice board जैसी लगती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Text That Stands Out</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f2f2f2; }
h1.shadow { text-align: center; color: #04aa6d; font-size: 48px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.card { background-color: white; max-width: 600px; margin: 20px auto; padding: 25px; border-radius: 10px; }
.long-word { overflow-wrap: break-word; border: 1px solid #ccc; padding: 15px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #ccc; padding: 15px; }
.side { writing-mode: vertical-rl; background-color: #333; color: white; padding: 15px; font-size: 20px; font-weight: bold; }
.wrap { display: flex; gap: 20px; max-width: 600px; margin: 20px auto; }
.wrap p { background-color: white; padding: 20px; border-radius: 10px; flex: 1; }
</style>
</head>
<body>
<h1 class="shadow">Welcome to KAMALDNP</h1>
<div class="card">
<h2>A very long word</h2>
<p class="long-word">ThisIsAnExtremelyLongWordThatWouldNormallyBreakTheLayoutButWordWrapKeepsItInsideTheBox</p>
</div>
<div class="card">
<h2>One line only</h2>
<p class="ellipsis">This headline is far too long for one line, so it ends with three dots instead of wrapping.</p>
</div>
<div class="wrap">
<div class="side">Notice Board</div>
<p>Vertical text like this is common on side headings and book spines. The writing-mode property turns the whole block upright.</p>
</div>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. लंबे शब्दों को लेआउट तोड़ने से कैसे रोकें?
overflow-wrap: break-word से, जो बहुत लंबे शब्दों को बॉक्स से बाहर निकलने की जगह तोड़ देता है।
2. Three-dots effect के लिए किन तीन चीज़ों की ज़रूरत है?
white-space: nowrap, overflow: hidden और text-overflow: ellipsis — तीनों ज़रूरी हैं।
3. text-shadow का ऑर्डर क्या है?
Horizontal offset, vertical offset, blur, फिर colour — जैसे text-shadow: x y blur colour।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
