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

CSS लेख ओवरफ्लोअउट, पूर्ण अक्षर बदल, बदल नियम और लिखने की शैली

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

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

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

CSS text-overflow इस गुण के द्वारा निर्धारित किया जाता है कि अवश्यकता के अनुसार उपयोगकर्ता को दिखाने वाला अधिकांश टेक्स्ट कैसे प्रस्तुत किया जाए।

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

ये कुछ फ़ेटरों में रखा नहीं जा सकने वाला लंबा टेक्स्ट है। ये कुछ फ़ेटरों में रखा नहीं जा सकने वाला लंबा टेक्स्ट है

यह को लघुच्छेद (...) के रूप में प्रस्तुत किया जा सकता है:

ये कुछ फ़ेटरों में रखा नहीं जा सकने वाला लंबा टेक्स्ट है। ये कुछ फ़ेटरों में रखा नहीं जा सकने वाला लंबा टेक्स्ट है

CSS कोड नीचे दिया गया है:

उदाहरण

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

आप खुद साफ़ी करें

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

उदाहरण

div.test:hover {
  overflow: visible;
}

आप खुद साफ़ी करें

CSS शब्द परिवर्तन (Word Wrapping)

CSS word-wrap इस गुण के द्वारा लंबे टेक्स्ट को टूटकर अगले पंक्ति पर ले जाने की अनुमति दी जाती है。

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

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

word-wrap गुण के द्वारा, आप टेक्स्ट को अनिवार्य रूप से परिवर्तन कर सकते हैं - यहां तक कि इससे शब्द के मध्य टूटना भी चाहिए:

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

CSS कोड नीचे दिया गया है:

उदाहरण

अधिकांश शब्द को टूटकर अगले पंक्ति पर ले जाने की अनुमति देता है:

p {
  word-wrap: break-word;
}

आप खुद साफ़ी करें

CSS परिवर्तन नियम

CSS word-break इस गुण के द्वारा परिवर्तन नियम निर्धारित किया जाता है。

इस पैराग्राफ में कुछ टेक्स्ट है. इस पंक्ति को हाइफ़न पर टूटेंगी:

इस पैराग्राफ में कुछ टेक्स्ट है. इस पंक्ति को हाइफ़न पर टूटेंगी:

इस पैराग्राफ में कुछ टेक्स्ट है. इस पंक्ति को किसी भी अक्षर पर टूटेंगी:

इस पैराग्राफ में कुछ टेक्स्ट है. पंक्तियाँ किसी भी अक्षर पर टूटेंगी.

CSS कोड नीचे दिया गया है:

उदाहरण

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

आप खुद साफ़ी करें

CSS लिखने की प्रणाली

CSS writing-mode इस गुण के द्वारा टेक्स्ट की पंक्ति को स्थानांतरित करने या खड़े रखने का निर्धारण किया जाता है。

एक span एलीमेंट के साथ कुछ टेक्स्ट के साथ 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 निर्दिष्ट पाठ पंक्ति को स्थायी रूप से स्थापित करने के लिए या उभरे रूप से स्थापित करने के लिए कैसे करें。