Articles
CSS का परिचय
कोड प्रदर्शन और उद्धरणों के लिए CSS गुण

कोड प्रदर्शन और उद्धरणों के लिए CSS गुण

यह लेख कोड प्रदर्शन और उद्धरणों से संबंधित CSS गुणों को समझाता है।

आप कोड डिस्प्ले और उद्धरणों से संबंधित CSS प्रॉपर्टीज़, जैसे quotes और user-select, उनके उपयोग के तरीके और उन्हें कैसे लिखना है, इसके बारे में सीख सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-code-quotation.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

कोड प्रदर्शन और उद्धरणों के लिए CSS गुण

white-space प्रॉपर्टी 

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

white-space प्रॉपर्टी एक CSS प्रॉपर्टी है जो यह निर्धारित करती है कि किसी एलिमेंट के भीतर स्पेस और लाइन ब्रेक्स को कैसे संभाला जाए। डिफ़ॉल्ट रूप से, HTML एकाधिक स्पेस को एक स्पेस के रूप में मानता है, लेकिन white-space प्रॉपर्टी आपको इस व्यवहार को संशोधित करने की अनुमति देती है।

white-space के मुख्य मान

  • normal डिफ़ॉल्ट मान है, जहां कई स्पेस एक में सिमट जाते हैं और लाइनें स्वचालित रूप से टूटती हैं।
  • nowrap स्पेस को एक में सिमट देता है लेकिन लाइन ब्रेक को रोकता है। सामग्री एक पंक्ति में प्रदर्शित होती है।
  • pre स्पेस और लाइन ब्रेक को वैसा ही बनाए रखता है जैसा वे हैं। लाइन रैपिंग नहीं होती।
  • pre-wrap स्पेस और लाइन ब्रेक को बनाए रखता है और साथ ही लाइन रैपिंग की अनुमति देता है।
  • pre-line स्पेस को सिमट देता है लेकिन लाइन ब्रेक को बनाए रखता है और लाइन रैपिंग की अनुमति देता है।
  • break-spaces स्पेस और लाइन ब्रेक को बनाए रखता है और लंबे शब्दों या स्पेस में ब्रेक की अनुमति देता है।

overflow-wrap प्रॉपर्टी 

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

overflow-wrap प्रॉपर्टी, जिसे पहले word-wrap कहा जाता था, यह परिभाषित करती है कि जब शब्द कंटेनर की चौड़ाई से अधिक हो जाते हैं तो उन्हें कैसे संभाला जाए। इस प्रॉपर्टी का उपयोग करके, आप शब्दों को ठीक से रैप कर सकते हैं जिससे टेक्स्ट का ओवरफ्लो और लेआउट के टूटने से बचा जा सके।

इस उदाहरण में, normal के साथ, लंबे शब्द कंटेनर से बाहर जा सकते हैं और क्षैतिज स्क्रॉलिंग कर सकते हैं, लेकिन break-word लंबे शब्दों को रैप करने के लिए मजबूर करता है।

प्रॉपर्टी के मान

overflow-wrap के मुख्य रूप से दो मान हैं:।

  • normal

    normal डिफ़ॉल्ट मान है, जहां ब्राउज़र मानक शब्द-रैपिंग नियमों का पालन करता है। आमतौर पर, शब्द केवल ब्रेकेबल पॉइंट्स जैसे स्पेस या हाइफन पर रैप होते हैं। यदि कोई शब्द अत्यधिक लंबा है, तो वह कंटेनर की चौड़ाई से अधिक हो सकता है और लेआउट को बिगाड़ सकता है।

  • break-word break-word, यदि आवश्यक हो, तो लाइन ब्रेक के लिए मजबूर करता है और शब्द की लंबाई की परवाह किए बिना टेक्स्ट को अगली पंक्ति में रैप करता है। यह लंबे शब्दों के कारण कंटेनर लेआउट के टूटने को रोकने में मदद करता है।

    जब break-word निर्दिष्ट किया जाता है, तो शब्द बिना रिक्त स्थान या हाइफ़न के भी स्क्रीन चौड़ाई में फिट होने के लिए लपेटते हैं। यह विशेष रूप से URL या बहुत लंबे शब्दों के लिए उपयोगी है।

overflow-wrap और अन्य गुणों के बीच अंतर

overflow-wrap के समान गुणों में word-break और white-space शामिल हैं।

word-break से अंतर

word-break यह परिभाषित करता है कि पूरे शब्दों को कैसे संभाला जाता है, जबकि overflow-wrap केवल तब सक्रिय होता है जब कोई शब्द कंटेनर की चौड़ाई से अधिक हो। उदाहरण के लिए, word-break: break-all; किसी भी स्थिति पर शब्दों को तोड़ देता है, भले ही वे लंबे न हों, जबकि overflow-wrap केवल तब शब्दों को लपेटता है जब वे कंटेनर से अधिक हो जाते हैं।

white-space से अंतर

white-space गुण यह नियंत्रित करता है कि पूरे पाठ में लाइन ब्रेक और रिक्त स्थान को कैसे प्रबंधित किया जाए। overflow-wrap के विपरीत, white-space यह तय करता है कि लाइन ब्रेक और रिक्त स्थान संरक्षित रहें या नहीं, लेकिन सीधे-सीधे शब्द लपेटने को प्रभावित नहीं करता।

उदाहरण के लिए, white-space: nowrap; यह सुनिश्चित करता है कि पूरा पाठ बिना लपेटे एक ही लाइन पर बना रहे। दूसरी ओर, overflow-wrap टेक्स्ट लपेटने को नियंत्रित करता है।

व्यावहारिक उपयोग के मामले

overflow-wrap निम्नलिखित स्थितियों में विशेष रूप से उपयोगी है:।

  1. URL दिखाना: लंबे URL को दिखाते समय लेआउट समस्याओं को रोकता है।
  2. तकनीकी शब्द: ऐसे मामलों को संभालता है जहां सतत अंग्रेज़ी शब्द या तकनीकी शब्द कंटेनर की चौड़ाई से अधिक हो जाते हैं।
  3. उत्तरदायी डिज़ाइन: सुनिश्चित करता है कि लंबा पाठ लेआउट को तोड़े नहीं, यहां तक कि छोटे स्क्रीन पर भी।

quotes प्रॉपर्टी 

1q {
2    quotes: "(" ")" "[" "]";
3}

quotes प्रॉपर्टी का उपयोग उद्धरण चिह्नों को अनुकूलित करने के लिए किया जाता है। आमतौर पर, <blockquote> या <q> तत्वों की सामग्री को लपेटते समय उद्धरण चिह्न स्वचालित रूप से डाले जाते हैं, लेकिन quotes प्रॉपर्टी का उपयोग करके आप कस्टम उद्धरण चिह्न निर्दिष्ट कर सकते हैं।

इस उदाहरण में, कोष्टक चिह्न ((, )) बाहरी उद्धरण चिह्न के रूप में उपयोग किए गए हैं। इसके अलावा, घुसे हुए उद्धरण चिह्नों को वर्ग कोष्ठक ([, ]) द्वारा दर्शाया गया है।

सिंटैक्स (वाक्य रचना) 

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

quotes प्रॉपर्टी को निम्नलिखित मानों के साथ निर्दिष्ट किया जा सकता है:।

  • none: कोई उद्धरण चिह्न प्रदर्शित नहीं होंगे।
  • उद्धरणों की एक श्रृंखला: उद्घाटन और समापन उद्धरण चिह्न निर्दिष्ट करें। पहला सेट बाहरी उद्धरण चिह्नों को दर्शाता है, जबकि बाद के सेट घुसे हुए उद्धरणों के लिए हैं।

quotes के मुख्य बिंदु

quotes प्रॉपर्टी टेक्स्ट उद्धरणों में उपयोग किए जाने वाले उद्धरण चिह्नों को अनुकूलित करने के लिए एक उपयोगी प्रॉपर्टी है। डिजाइन और भाषा के अनुसार उपयुक्त उद्धरण चिह्न सेट करके, आप एक अधिक परिष्कृत पृष्ठ प्रेजेंटेशन प्राप्त कर सकते हैं। quotes प्रॉपर्टी का उपयोग करने से निम्नलिखित लाभ मिलते हैं:।

  • उद्धरण चिह्नों को अनुकूलित करें: आप उद्धरण चिह्नों का डिफ़ॉल्ट आकार बदल सकते हैं या किसी विशिष्ट डिज़ाइन के अनुरूप उद्धरण चिह्न सेट कर सकते हैं।
  • घोंसले वाले उद्धरणों को समर्थन प्रदान करता है: आप घोंसले वाले उद्धरणों के लिए अलग-अलग सेट के उद्धरण चिह्न लागू कर सकते हैं।
  • देश और भाषा के अनुसार अनुकूलन योग्य: भाषा या देश के आधार पर अलग-अलग शैलियों के उद्धरण चिह्न आसानी से लागू करें, जो अंतरराष्ट्रीय वेबसाइटों के लिए उपयोगी है।

user-select प्रॉपर्टी 

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

  • user-select प्रॉपर्टी एक CSS प्रॉपर्टी है जिसका उपयोग यह नियंत्रित करने के लिए किया जाता है कि उपयोगकर्ता टेक्स्ट का चयन कर सकते हैं या नहीं। इस प्रॉपर्टी का उपयोग करके, आप विशेष तत्वों में या पूरे पृष्ठ पर टेक्स्ट को कॉपी होने से रोक सकते हैं, या इसे चयन योग्य बना सकते हैं। user-select प्रॉपर्टी के लिए यदि आप all निर्दिष्ट करते हैं, तो पूरा एलिमेंट एक बार में चुना जाता है। उदाहरण के लिए, जब कोई उपयोगकर्ता टेक्स्ट फ़ील्ड या पैराग्राफ पर क्लिक करता है, तो पूरा एलिमेंट एक बार में चुना जाता है।

  • यह स्रोत कोड के बड़े हिस्से का चयन करने के लिए भी उपयोग किया जा सकता है।

  • इस उदाहरण में, पहले पैराग्राफ का टेक्स्ट चुना जा सकता है, लेकिन दूसरे पैराग्राफ का टेक्स्ट नहीं। select-all क्लास में, user-select प्रॉपर्टी को all पर सेट किया गया है, जिससे पूरा एलिमेंट एक बार में ही चुना जा सकता है।

सिंटैक्स (वाक्य रचना) 

1element {
2    user-select: auto | none | text | all | contain;
3}

user-select प्रॉपर्टी निम्नलिखित मानों के साथ निर्दिष्ट की जा सकती है:।

  • auto: ब्राउज़र के डिफ़ॉल्ट व्यवहार का उपयोग करें। ज्यादातर एलिमेंट्स पर टेक्स्ट चयन की अनुमति है, लेकिन इसे बटन और लिंक जैसे कुछ इंटरएक्टिव एलिमेंट्स पर प्रतिबंधित किया जा सकता है।
  • none: टेक्स्ट चयन पूरी तरह से निष्क्रिय है। उपयोगकर्ता उस एलिमेंट के भीतर टेक्स्ट को चुनने में सक्षम नहीं होंगे।
  • text: केवल एलिमेंट के भीतर के टेक्स्ट को चयन करने की अनुमति देता है।
  • all: पूरा एलिमेंट एक बार में चुना जाता है। आंशिक चयन के बजाय, पूरा एलिमेंट एक इकाई के रूप में चुना जाता है।
  • contain: केवल कुछ ब्राउज़रों द्वारा समर्थित। क्लिक की गई स्थिति पर केवल उसी एलिमेंट का चयन करने की अनुमति देता है।

समर्थित ब्राउज़र्स

user-select प्रॉपर्टी अधिकांश आधुनिक ब्राउज़रों द्वारा समर्थित है। हालांकि, कुछ ब्राउज़र को -webkit-user-select जैसे वेंडर प्रीफिक्स की आवश्यकता हो सकती है।

  • Chrome: समर्थित
  • Firefox: समर्थित
  • Safari: समर्थित (-webkit- प्रीफिक्स की आवश्यकता है)।
  • Edge: समर्थित
  • Internet Explorer: समर्थित नहीं।

मुख्य उपयोग के मामले

user-select प्रॉपर्टी निम्नलिखित लाभ प्रदान करती है:।

  • यूआई तत्व: क्लिक या खींचने के संचालन में बाधा डालने से बचने के लिए टेक्स्ट चयन को अक्षम करें।
  • पाठ की प्रतिलिपि को रोकें: कुछ तत्वों पर पाठ चयन और प्रतिलिपि को रोकें।
  • फॉर्म और इंटरएक्टिव तत्व: इंटरएक्टिव तत्वों पर लागू करें जहां पाठ चयन अनावश्यक है ताकि उपयोगकर्ता अनुभव बढ़ सके।

सारांश

user-select प्रॉपर्टी एक उपयोगी CSS प्रॉपर्टी है जो वेबपेज पर टेक्स्ट चयन पर लचीला नियंत्रण करने की अनुमति देती है। यह उपयोगकर्ताओं को अनावश्यक टेक्स्ट को गलती से चुनने से रोक सकता है या उन्हें सभी कुछ एक साथ चुनने की अनुमति दे सकता है, विभिन्न इंटरैक्शनों को समर्थन देता है।

tab-size प्रॉपर्टी 

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}
  • tab-size प्रॉपर्टी का उपयोग टैब अक्षरों के लिए स्थान को अनुकूलित करने के लिए किया जाता है। डिफ़ॉल्ट रूप से, टैब चौड़ाई आम तौर पर 8 स्थानों पर सेट की जाती है, लेकिन इसे tab-size प्रॉपर्टी का उपयोग करके किसी भी मान में समायोजित किया जा सकता है।

सिंटैक्स (वाक्य रचना) 

1element {
2    tab-size: length | number;
3}

tab-size प्रॉपर्टी निम्न प्रकार के मानों को स्वीकार कर सकती है।

  • संख्या: टैब अक्षर की चौड़ाई को वर्ण गिनती के रूप में निर्दिष्ट करता है। आप एक पूर्णांक या दशमलव निर्दिष्ट कर सकते हैं।
  • दूरी: टैब अक्षर की चौड़ाई को लंबाई इकाइयों (जैसे, px, em) का उपयोग करके निर्दिष्ट करता है।

नोट्स

  • tab-size प्रॉपर्टी सामान्यतः मोनोस्पेस फोंट्स के साथ उपयोग की जाती है। आनुपातिक फोंट्स के साथ उपयोग किए जाने पर, टैब चौड़ाई असमान हो सकती है।

  • अक्षरों की संख्या निर्दिष्ट करते समय, विभिन्न उपकरणों पर स्केलिंग का ध्यान रखें।

सारांश

tab-size प्रॉपर्टी का उपयोग कोड या टैब अक्षरों को प्रदर्शित करते समय लचीलापन बढ़ाता है। एक डेवलपर के रूप में, टैब चौड़ाई को सही तरीके से सेट करना कोड पठनीयता और डिज़ाइन संगति सुनिश्चित करता है।

text-indent प्रॉपर्टी 

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}
  • text-indent प्रॉपर्टी का उपयोग ब्लॉक तत्व में पाठ की पहली पंक्ति को निर्दिष्ट दूरी तक इंडेंट करने के लिए किया जाता है। यह प्रॉपर्टी आपको पैराग्राफ की केवल पहली पंक्ति को स्टाइल करने की अनुमति देती है।

सिंटैक्स (वाक्य रचना) 

1element {
2    text-indent: length | percentage;
3}

text-indent प्रॉपर्टी निम्न प्रकार के मानों को स्वीकार कर सकती है।

  • दूरी: इंडेंटेशन को लंबाई इकाइयों (जैसे, px, em) का उपयोग करके निर्दिष्ट करता है।
  • प्रतिशत: इंडेंटेशन को कंटेनर तत्व की चौड़ाई के आधार पर प्रतिशत के रूप में निर्दिष्ट करता है।

नोट्स

  • text-indent केवल ब्लॉक तत्वों पर लागू होती है। इसका इनलाइन तत्वों पर कोई प्रभाव नहीं पड़ता है।

सारांश

text-indent प्रॉपर्टी पठनीय टेक्स्ट डिज़ाइन बनाने के लिए एक सरल लेकिन शक्तिशाली उपकरण है। मूल बातों को सीखकर और उन्नत उपयोग मामलों और विचारों को समझकर, आप अधिक प्रभावी ढंग से स्टाइल कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

टेक्स्ट स्पेसिंग से संबंधित CSS गुणबॉक्स मॉडल से संबंधित CSS गुण