CSS3 - पाठ

CSS3 में कई अतिरिक्त विशेषताएं शामिल थीं, जिन्हें बाद में जोड़ा गया है।

text-overflow
word-wrap
word-break

CSS3 में सबसे अधिक इस्तेमाल की जाने वाली संपत्ति निम्नलिखित हैं -

अनु क्रमांक।	मूल्य और विवरण
1	text-align-last पाठ की अंतिम पंक्ति को संरेखित करने के लिए उपयोग किया जाता है
2	text-emphasis पाठ और रंग पर जोर देने के लिए उपयोग किया जाता है
3	text-overflow यह निर्धारित करने के लिए उपयोग किया जाता है कि प्रदर्शित नहीं की गई अतिप्रवाहित सामग्री उपयोगकर्ताओं के लिए कैसे संकेतित है
4	word-break शब्द के आधार पर लाइन को तोड़ने के लिए उपयोग किया जाता है
5	word-wrap लाइन को तोड़ने और अगली पंक्ति में लपेटने के लिए उपयोग किया जाता है

पाठ-अतिप्रवाह

पाठ-अतिप्रवाह गुण यह निर्धारित करता है कि प्रदर्शित नहीं की गई अतिप्रवाहित सामग्री उपयोगकर्ताओं को कैसे संकेतित करती है। टेक्स्ट ओवरफ्लो का नमूना उदाहरण निम्नानुसार दिखाया गया है -

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>

   <body>
   
      <b>Original Text:</b>
   
      <p>
         Tutorials Point originated from the idea that there exists a class of 
         readers who respond better to online content and prefer to learn new 
         skills at their own pace from the comforts of their drawing rooms.
      </p>
      
      <b>Text overflow:clip:</b>
   
      <p class = "text1">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of their 
         drawing rooms.
      </p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

CSS3 वर्ड ब्रेकिंग

लाइन को तोड़ने के लिए उपयोग किया जाता है, निम्नलिखित कोड वर्ड ब्रेकिंग का नमूना कोड दिखाता है।

<html>
   <head>
      <style>
         p.text1 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: break-all;
         }
      </style>
   </head>

   <body>
   
      <b>line break at hyphens:</b>
      <p class = "text1">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of 
         their drawing rooms.
      </p>
      
      <b>line break at any character</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

सीएसएस शब्द रैपिंग

वर्ड रैपिंग का इस्तेमाल लाइन को तोड़ने और अगली लाइन पर रैप करने के लिए किया जाता है। निम्नलिखित कोड में सैंपल सिंटैक्स होगा -

p {
   word-wrap: break-word;
}