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

white-space प्रॉपर्टी यह सेट करती है कि टेक्स्ट को नई लाइन पर कैसे लपेटा जाए, और साथ ही शब्दों के बीच रिक्त स्थान और लाइन ब्रेक (वे स्थान जहां कोड टाइप करते समय Enter दबाया गया था) को कैसे दिखाया जाए।

सिंटैक्स

cssसिलेक्टर {
  white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

वैल्यूज

वैल्यू	विवरण
`nowrap`	टेक्स्ट को दूसरी लाइन पर लपेटने से रोकता है, भले ही वह कंटेनर की चौड़ाई में फिट न हो (इस स्थिति में टेक्स्ट उसकी सीमाओं से बाहर निकल जाएगा)। हालांकि, `br` टैग जोड़ने पर टेक्स्ट नई लाइन पर लपेट जाएगा।
`pre`	टेक्स्ट वैसे ही दिखाया जाता है, जैसे वह साइट कोडिंग करते समय नोटपैड में टाइप किया गया था: सभी रिक्त स्थान और enter के साथ (यदि कोड में कई रिक्त स्थान टाइप किए गए हैं - तो स्क्रीन पर भी कई होंगे)। इसके साथ ही, ब्राउज़र टेक्स्ट को नई लाइन पर नहीं लपेटेगा, यदि वह कंटेनर में फिट नहीं होता है - टेक्स्ट उसकी सीमाओं से बाहर निकल जाएगा। pre टैग के समान, लेकिन इसके विपरीत फॉन्ट को मोनोस्पेस में नहीं बदलता (मोनोस्पेस फॉन्ट के बारे में जानने के लिए, `font-family` प्रॉपर्टी देखें)।
`pre-wrap`	pre के समान ही, अंतर केवल इतना है कि यदि टेक्स्ट बहुत लंबा है और कंटेनर में फिट नहीं होता - ब्राउज़र उसे दूसरी लाइन पर लपेट देगा।
`pre-line`	ब्राउज़र केवल HTML कोड में Enter को ध्यान में रखता है और बाकी सब को नजरअंदाज कर देता है (कई रिक्त स्थान एक जैसे दिखाई देंगे, ब्राउज़र स्वयं लाइन ब्रेक सेट करता है)।
`normal`	मानक व्यवहार: ब्राउज़र स्वयं लाइन ब्रेक इस तरह से सेट करता है ताकि शब्द कंटेनर में फिट हो जाएं। कोड में कई रिक्त स्थान स्क्रीन पर एक ही दिखाई देंगे।

डिफॉल्ट वैल्यू: normal।

उदाहरण . nowrap वैल्यू

इस उदाहरण में टेक्स्ट कंटेनर में फिट नहीं होगा और उसकी सीमाओं से बाहर निकल जाएगा, क्योंकि nowrap वैल्यू सेट है:

html<div id="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

उदाहरण . nowrap वैल्यू और br टैग

यदि br टैग जोड़ा जाए - तो टेक्स्ट नई लाइन पर लपेट जाएगा (ठिक उसी स्थान पर, जहां br है):

html<div id="elem">
  Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

उदाहरण . pre वैल्यू

इस उदाहरण में टेक्स्ट वैसे ही दिखाया जाता है, जैसे वह HTML कोड एडिटर में टाइप किया गया था (सभी Tab की दबाने से बने इंडेंट, Enter आदि के साथ):

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: pre;
  border: 1px solid red;
}

Результат:

उदाहरण . pre-wrap वैल्यू

और अब टेक्स्ट वैसे ही दिखाया जाता है, जैसे वह HTML कोड एडिटर में टाइप किया गया था, हालांकि, बाहर निकलने वाले हिस्से नई लाइन पर लपेट दिए जाते हैं:

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: pre-wrap;
  border: 1px solid red;
}

Результат:

यह भी देखें

word-break और overflow-wrap प्रॉपर्टीज,
जो लंबे शब्द के अक्षरों को नई लाइन पर लपेटने की अनुमति देती हैं
tab-size प्रॉपर्टी,
जो Tab कुंजी द्वारा बनाए गए इंडेंट का आकार सेट करती है
hyphens प्रॉपर्टी,
जो शब्दों को शब्दांशों में विभाजित करके लपेटने को सक्षम करती है
overflow प्रॉपर्टी,
जो ब्लॉक की सीमा से बाहर निकलने वाले हिस्सों को काटती है
pre टैग,
जो टेक्स्ट को वैसे ही दिखाता है, जैसे वह HTML कोड एडिटर में टाइप किया गया था