सीएसएस पाठ प्रभाव

CSS टेक्स्ट ओवरफ्लो, वर्ड रैप, लाइन ब्रेकिंग रूल्स और राइटिंग मोड्स

इस अध्याय में आप निम्नलिखित गुणों के बारे में जानेंगे:

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

सीएसएस पाठ अतिप्रवाह

CSS text-overflowगुण निर्दिष्ट करता है कि प्रदर्शित नहीं होने वाली ओवरफ्लो सामग्री को उपयोगकर्ता को कैसे संकेतित किया जाना चाहिए।

इसे काटा जा सकता है:

यह कुछ लंबा टेक्स्ट है जो बॉक्स में फिट नहीं होगा

या इसे इलिप्सिस (...) के रूप में प्रस्तुत किया जा सकता है:

यह कुछ लंबा टेक्स्ट है जो बॉक्स में फिट नहीं होगा

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

उदाहरण

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-wrapगुण लंबे शब्दों को तोड़ने और अगली पंक्ति पर लपेटने में सक्षम होने की अनुमति देता है।

यदि कोई शब्द किसी क्षेत्र में फिट होने के लिए बहुत लंबा है, तो वह बाहर फैलता है:

इस अनुच्छेद में एक बहुत लंबा शब्द है: यह हर हर हर बहुत बहुत लंबा शब्द है। लंबा शब्द टूट जाएगा और अगली पंक्ति में आ जाएगा।

वर्ड-रैप प्रॉपर्टी आपको टेक्स्ट को रैप करने के लिए मजबूर करने की अनुमति देती है - भले ही इसका मतलब इसे किसी शब्द के बीच में विभाजित करना हो:

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

उदाहरण

लंबे शब्दों को तोड़ने और अगली पंक्ति में लपेटने में सक्षम होने दें:

p {
word-wrap: break-word;
}

सीएसएस वर्ड ब्रेकिंग

CSS word-breakगुण लाइन ब्रेकिंग नियम निर्दिष्ट करता है।

इस पैराग्राफ में कुछ टेक्स्ट है। यह लाइन विल-ब्रेक-एट-हाइफ़न.

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

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

उदाहरण

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

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

सीएसएस लेखन मोड

CSS writing-modeगुण निर्दिष्ट करता है कि पाठ की पंक्तियाँ क्षैतिज या लंबवत रूप से रखी गई हैं या नहीं।

a . के साथ स्पैन एलिमेंट वाला कुछ टेक्स्ट लंबवत-आरएल लेखन-विधि।

निम्नलिखित उदाहरण कुछ अलग लेखन मोड दिखाता है:

उदाहरण

p.test1 {
writing-mode: horizontal-tb;
}

span.test2 {
writing-mode: vertical-rl;
}

p.test2 {
writing-mode: vertical-rl;
}