← Back to CSS Course | Chapter 4: Text & Fonts | Lesson 2 of 10

CSS Text Advanced

Basic text styling color, size, और alignment cover करती है, लेकिन असली paragraphs को finer control चाहिए होता है: किसी justified paragraph की बिल्कुल आख़िरी line कैसे align होती है, किसी लंबे unbroken word को उसके box से overflow होने से बचाने के लिए slice किया जाना चाहिए या नहीं, और words को किसी printed book की तरह automatically hyphenate होना चाहिए या नहीं। ये advanced text properties ठीक इसी तरह के fine typographic detail को handle करती हैं।

In this page:

  1. text-align-last से Final Line को Align करना
  2. word-break से लंबे Words तोड़ना
  3. hyphens से Automatic Hyphenation
  4. text-justify और hanging-punctuation से Spacing Fine-Tune करना
  5. unicode-bidi और text-emphasis से Text Direction और Emphasis
Syntax
css 
selector {
  text-indent: length;
  letter-spacing: length;
  line-height: number;
  word-spacing: length;
}

text-align-last से Final Line को Align करना

जब कोई paragraph text-align: justify इस्तेमाल करता है, तो आख़िरी line को छोड़कर हर line stretch हो जाती है ताकि उसके words दोनों edges को छुएँ। text-align-last specifically उस बची हुई final line को control करता है, जिससे आप उसे left-align, center, या यहाँ तक कि justify भी कर सकते हैं, उसे उसकी natural short length पर छोड़ने के बजाय।

Note:
  • justified pull-quotes पर text-align-last: center set करें ताकि छोटी आख़िरी line जानबूझकर की गई लगे, accidental नहीं।
  • Accepted values:
  • text-align-last: auto | start | end | left | right | center | justify
  • text-justify: auto | inter-word | inter-character | none
  • hyphens: none | manual | auto
  • word-break: normal | break-all | keep-all | break-word
  • overflow-wrap: normal | break-word | anywhere
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: text-align-last का कोई visible effect नहीं होता जब तक paragraph पहले से justified न हो या naturally कई lines में wrap न हो।

उदाहरण: Aligning the Final Line with text-align-last

css 
<style>
p {
  text-align: justify;
  text-align-last: center;
}
</style>
<p>This justified paragraph has a short final line and this last line is centered instead of left.</p>

word-break से लंबे Words तोड़ना

word-break control करता है कि क्या होता है जब कोई एक अकेला unbroken word, जैसे कोई लंबा URL या filename, अपने container में fit होने के लिए बहुत wide हो।

इसे break-all set करना browser को किन्हीं भी दो characters के बीच break करने देता है, जबकि keep-all CJK text के अंदर breaking रोकता है जहाँ words spaces से अलग नहीं होते।

Note:
  • word-break: break-all को specifically code snippets या URLs पर इस्तेमाल करें, normal paragraph text पर नहीं जहाँ यह सामान्य words को awkwardly काट सकता है।
  • Accepted values:
  • normal — default word breaking (initial value)
  • break-all — किन्हीं भी दो letters के बीच break हो सकता है
  • keep-all — CJK text में कोई breaks नहीं
  • break-word — overflow-wrap: anywhere का deprecated alias
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: Globally लागू किया गया break-all सामान्य छोटे English words को बीच से तोड़ देगा जब भी कोई line थोड़ी लंबी चली जाए।

उदाहरण: Breaking Long Words with word-break

css 
<style>
.url {
  width: 150px;
  word-break: break-all;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 6px;
}
</style>
<div class="url">https://example.com/very/long/unbroken/url/path</div>

hyphens से Automatic Hyphenation

hyphens: auto browser को बताता है कि जब कोई word अगली line पर wrap करना पड़े तो उचित syllable breaks पर automatically hyphens डाले, बिल्कुल किसी printed book के hyphenation की तरह। यह जानने के लिए कि syllable breaks कहाँ valid हैं, यह lang attribute से declare की गई language पर निर्भर करता है।

Note:
  • हमेशा hyphens: auto को html element पर lang="en" (या सही language code) के साथ जोड़ें, वरना browser के पास इस्तेमाल करने के लिए कोई hyphenation dictionary नहीं होगी।
  • Accepted values:
  • auto — browser lang dictionary इस्तेमाल करके hyphenate करता है
  • manual — सिर्फ &shy; characters पर (initial value)
  • none — कभी hyphenate न करें
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: hyphens: auto valid lang attribute के बिना browsers या documents में चुपचाप कुछ नहीं करता, जिसे debug करना confusing हो सकता है।

उदाहरण: Automatic Hyphenation with hyphens

css 
<html lang="en">
<style>
  p {
    hyphens: auto;
    width: 100px;
  }
</style>
<p>Internationalization is a very long word that needs hyphenation</p>
</html>

text-justify और hanging-punctuation से Spacing Fine-Tune करना

text-justify refine करता है कि text-align: justify exactly कैसे extra space बाँटता है -- inter-word (सिर्फ words के बीच) बनाम inter-character (हर character के बीच), जो CJK typography के लिए सबसे ज़्यादा मायने रखता है। hanging-punctuation opening quotation marks या bullets को text block के edge से थोड़ा बाहर लटकने देता है, यह एक subtle trick है जो print typographers visual left edge को बिल्कुल straight दिखाने के लिए इस्तेमाल करते हैं।

Note:
  • blockquotes पर hanging-punctuation: first इस्तेमाल करें ताकि opening quotation mark पहली line पर एक छोटा visual indent न बनाए।
  • Accepted values:
  • text-justify: auto — browser चुनता है (initial value)
  • text-justify: inter-word — words के बीच spaces adjust करता है
  • text-justify: inter-character — letters के बीच spaces adjust करता है
  • text-justify: none — justification disable करता है
  • hanging-punctuation: none | first | last | force-end | allow-end — punctuation box के बाहर लटकता है (सिर्फ Safari)
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: text-justify का असर सिर्फ तभी होता है जब text-align पहले से justify set हो, और hanging-punctuation को Safari के बाहर limited browser support है।

उदाहरण: Fine-Tuning Spacing with text-justify and hanging-punctuation

css 
<style>
p {
  text-align: justify;
  text-justify: inter-word;
}
blockquote {
  hanging-punctuation: first;
}
</style>
<p>Justified text spaced only between words, not between characters.</p>
<blockquote>"A quotation mark hangs slightly outside the edge."</blockquote>

unicode-bidi और text-emphasis से Text Direction और Emphasis

unicode-bidi direction property के साथ मिलकर काम करता है ताकि browser mixed left-to-right और right-to-left text को handle करे, जैसे कोई English sentence जिसमें एक embedded Arabic phrase हो। text-emphasis characters के ऊपर या नीचे छोटे marks जोड़ता है, जैसे CJK typography italics या bold इस्तेमाल करने के बजाय किसी text के हिस्से को emphasize करने के लिए dots या circles इस्तेमाल करती है।

Note:
  • East-Asian text को traditional तरीके से highlight करने के लिए text-emphasis इस्तेमाल करें, क्योंकि CJK typography में italics और underlines conventional emphasis styles नहीं हैं।
  • Accepted values:
  • unicode-bidi: normal — कोई extra embedding नहीं (initial value)
  • unicode-bidi: embed — embedding का एक extra level खोलता है
  • unicode-bidi: isolate — element को आस-पास के text से isolate करता है
  • unicode-bidi: bidi-override | isolate-override — direction को force करता है
  • unicode-bidi: plaintext — content से direction तय करता है
  • text-emphasis: none | <style> <color> — जैसे filled dot red
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: सही direction value के बिना unicode-bidi: bidi-override set करना mixed-direction text के पढ़ने के order को unexpectedly गड़बड़ कर सकता है।

उदाहरण: Text Direction and Emphasis with unicode-bidi and text-emphasis

css 
<style>
.mixed {
  direction: ltr;
  unicode-bidi: bidi-override;
}
.emphasis {
  text-emphasis: dot;
}
</style>
<p class="mixed">English text with an embedded phrase</p>
<p class="emphasis">Emphasized run of text</p>
Live Example
Related Topics

CSS Text · CSS Text Effects · CSS Font Advanced · CSS Advanced Dropdowns

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. html tag पर lang attribute declare किए बिना hyphens: auto set करना, इसलिए browser के पास hyphenate करने के लिए कोई dictionary नहीं होती।
  2. साधारण English prose पर word-break: break-all इस्तेमाल करना, जो सिर्फ लंबी unbreakable strings को तोड़ने के बजाय normal words को बीच से काट देता है।
  3. यह उम्मीद करना कि text-align-last किसी ऐसे paragraph पर कुछ करेगा जो खुद text-align: justify नहीं है, क्योंकि यह सिर्फ justified text की आख़िरी line को असर करता है।
चैप्टर सारांश
  • text-align-last, text-justify, और hanging-punctuation fine-tune करते हैं कि justified paragraphs space कैसे बाँटते हैं और edge punctuation कैसे handle करते हैं।
  • word-break और hyphens control करते हैं कि browser लंबे words को कैसे handle करता है जो वरना अपने container से overflow हो जाते।
  • unicode-bidi और text-emphasis क्रमशः bidirectional text direction और East-Asian style emphasis marks handle करते हैं।
ब्राउज़र सपोर्ट

hyphens, word-break, और text-emphasis हर modern browser में supported हैं; text-align-last, text-justify, और hanging-punctuation को partial support है, text-justify Chromium-based browsers में सबसे reliable है।

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Text Next Lesson → CSS Text Effects

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.