सीएसएस टेक्स्ट इफ़ेक्ट

CSS लेख ओवरफ्लोअव, पूर्ण शब्द बदलना, बदली जाने वाली लाइनों की नियम और लिखने की शैली

इस चैप्टर में आप निम्नलिखित गुणों को सीखेंगे:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS लेख ओवरफ्लोअव

CSS text-overflow इस गुण का निर्देश करता है कि अवश्यकता के अनुसार नज़र नहीं आने वाले अधिकारण को कैसे उपयोगकर्ता के सामने प्रस्तुत किया जाना चाहिए。

यह काटा जा सकता है:

यह कुछ फेंकबद्ध बक्स में नहीं रखे जाने वाला लंबा पाठ है। यह कुछ फेंकबद्ध बक्स में नहीं रखे जाने वाला लंबा पाठ है

यह कोई संक्षिप्त पट्टी (...) के रूप में प्रस्तुत किया जा सकता है:

यह कुछ फेंकबद्ध बक्स में नहीं रखे जाने वाला लंबा पाठ है। यह कुछ फेंकबद्ध बक्स में नहीं रखे जाने वाला लंबा पाठ है

CSS कोड इस प्रकार है:

उदाहरण

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  width: 200px;
  border: 1px solid #000000;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden; 
}

खुद अभिप्राय करें

text-overflow: ellipsis;

उदाहरण

नीचे दिए गए उदाहरण में एलीमेंट पर माउस लगाने पर कैसे अतिरिक्त सामग्री दिखाया जाएगा दिखाया गया है:
  div.test:hover {
}

खुद अभिप्राय करें

overflow: visible;

CSS word-wrap CSS शब्द नए पंक्ति पर लिखने (Word Wrapping)

प्रोपर्टी दीर्घ लेखों को टूटा जाने और अगली पंक्ति पर लिखा जाने की अनुमति देती है。

word-wrap प्रोपर्टी के माध्यम से आप टेक्स्ट को नए पंक्ति पर लिखा जाने के लिए मजबूर कर सकते हैं - यहां तक कि इससे शब्द के मध्य टूटना हो जाए:

यदि एक शब्द इस तरह लंबा होता है कि इसे किसी क्षेत्र में रखा नहीं जा सकता, तो यह बाहर की ओर फैल जाएगा:

word-wrap प्रोपर्टी के माध्यम से आप टेक्स्ट को नए पंक्ति पर लिखा जाने के लिए मजबूर कर सकते हैं - यहां तक कि इससे शब्द के मध्य टूटना हो जाए:

CSS कोड इस प्रकार है:

उदाहरण

इस पैराग्राफ में एक बहुत लंबा शब्द है: thisisaveryveryveryveryveryverylongword. इस लंबे शब्द को टूटा जाएगा और अगली पंक्ति पर लिखा जाएगा:

दीर्घ शब्द को टूटा जाने और अगली पंक्ति पर लिखा जाने की अनुमति देता है:
  p {
}

खुद अभिप्राय करें

word-wrap: break-word;

CSS word-break CSS नए पंक्ति पर लिखने के नियम

प्रोपर्टी निर्धारित करता है कि टेक्स्ट को नए पंक्ति पर नहीं लिखा जाए।

इस पैराग्राफ में कुछ लेखा जाने वाला टेक्स्ट है। इस पंक्ति को हाइफ़न पर टूट जाएंगी:

इस पैराग्राफ में कुछ लेखा जाने वाला टेक्स्ट है। इस पंक्ति को किसी भी कारक पर टूट जाएंगी:

इस पैराग्राफ में कुछ लेखा जाने वाला टेक्स्ट है। पंक्तियां किसी भी कारक पर टूट जाएंगी。

CSS कोड इस प्रकार है:

उदाहरण

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

खुद अभिप्राय करें

CSS लिखने के मोड

CSS writing-mode प्रोपर्टी निर्धारित करता है कि टेक्स्ट की पंक्ति होरीज़न्टल या वर्टिकल है।

एक स्पैन एलीमेंट के साथ कुछ लेखा जाने वाला टेक्स्ट vertical-rl writing-mode.

नीचे दिए गए उदाहरण में विभिन्न लिखने के मोड़ों को दिखाया गया है:

उदाहरण

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

खुद अभिप्राय करें

CSS टेक्स्ट इफेक्ट प्रोपर्टीज

इस तालिका में CSS टेक्स्ट इफेक्ट प्रोपर्टीज दिखाया गया है:

गुण 描述
text-align-last 指定如何对齐文本的最后一行。
text-justify 指定对齐的文本应如何对齐和间隔。
text-overflow 指定应如何向用户呈现未显示的溢出内容。
word-break 指定非 CJK 脚本的换行规则。
word-wrap 允许长单词被打断并换到下一行。
writing-mode 指定文本行是水平放置还是垂直放置。