सफेद-स्थान - सीएसएस-ट्रिक्स

व्हाइट-स्पेस प्रॉपर्टी यह नियंत्रित करती है कि जिस तत्व पर इसे लागू किया गया है, उस पर टेक्स्ट कैसे संभाला जाता है। मान लें कि आपके पास HTML इस तरह है:

 A bunch of words you see. 

आपने div को 100px की चौड़ाई निर्धारित करने के लिए स्टाइल किया है। एक उचित फ़ॉन्ट आकार में, यह 100px में फिट होने के लिए बहुत अधिक पाठ है। कुछ भी किए बिना, डिफ़ॉल्ट white-spaceमान है normal, और पाठ लपेट जाएगा। नीचे दिए गए उदाहरण को देखें या डेमो के साथ घर पर पालन करें।

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

यदि आप पाठ को लपेटने से रोकना चाहते हैं, तो आप आवेदन कर सकते हैं white-space: nowrap;

इस लेख के शीर्ष पर HTML कोड उदाहरण में सूचना, वास्तव में दो पंक्ति विराम हैं, एक पाठ की पंक्ति से पहले और एक के बाद, जो पाठ को अपनी पंक्ति में (कोड में) होने की अनुमति देता है। जब पाठ ब्राउज़र में रेंडर करता है, तो वे रेखाएं टूट जाती हैं जैसे कि उन्हें बाहर निकाल दिया जाता है। पहले अक्षर से पहले लाइन पर अतिरिक्त स्थान छीन लिए गए हैं। यदि हम ब्राउज़र को उन पंक्ति विराम और अतिरिक्त सफेद स्थान वर्णों को प्रदर्शित करने के लिए बाध्य करना चाहते हैं जो हम उपयोग कर सकते हैंwhite-space: pre;

यह कहा जाता है preक्योंकि व्यवहार यह है कि जैसे आपने पाठ को अंदर लपेट लिया था

टैग (जो डिफ़ॉल्ट रूप से सफेद स्थान को संभालते हैं और लाइन उस तरह से टूट जाती है)। श्वेत स्थान ठीक उसी तरह सम्मानित किया जाता है जैसे यह HTML में है और जब तक कोड में एक लाइन ब्रेक मौजूद नहीं होता तब तक टेक्स्ट रैप नहीं करता है। यह विशेष रूप से उपयोगी है जब शाब्दिक रूप से प्रदर्शित कोड, जो कुछ स्वरूपण से सौंदर्यशास्त्र को लाभ पहुंचाता है (और कुछ समय बिल्कुल महत्वपूर्ण है, जैसा कि सफेद अंतरिक्ष पर निर्भर भाषाओं में है!)

शायद आपको यह पसंद है कि preसफेद स्थान को कैसे सम्मानित किया जाता है और टूट जाता है, लेकिन आपको इसके मूल कंटेनर से संभावित रूप से टूटने के बजाय पाठ को लपेटने की आवश्यकता है। इसके white-space: pre-wrap;लिए क्या है:

अंत में, white-space: pre-line;लाइनों को तोड़ देंगे जहां वे कोड में टूट जाते हैं, लेकिन अतिरिक्त सफेद स्थान अभी भी छीन लिया गया है।

दिलचस्प बात यह है कि अंतिम लाइन ब्रेक को सम्मानित नहीं किया गया है। सीएसएस 2.1 कल्पना के अनुसार: "लाइनों को संरक्षित नईलाइन वर्णों पर तोड़ा जाता है, और लाइन के बक्से को भरने के लिए आवश्यक है।" तो शायद यह समझ में आता है।

यहाँ सभी विभिन्न मूल्यों के व्यवहार को समझने के लिए एक तालिका दी गई है:

	नई लाइनें	रिक्त स्थान और टैब	पाठ रैपिंग
साधारण	ढहने	ढहने	चादर
पूर्व	रक्षित	रक्षित	कोई लपेट नहीं
nowrap	ढहने	ढहने	कोई लपेट नहीं
लपेटो	रक्षित	रक्षित	चादर
पूर्व पंक्ति	रक्षित	ढहने	चादर

CSS3 में, white-spaceसंपत्ति शाब्दिक रूप से उस चार्ट का पालन करने वाली है text-space-collapseऔर text-wrapउसी के अनुसार और गुणों को मैप करती है ।

अधिक जानकारी

• मोज़िला डॉक्स

ब्राउज़र का समर्थन

नियमित समर्थन तालिका की तुलना में थोड़ा अधिक जटिल है, क्योंकि प्रत्येक मूल्य में समर्थन के विभिन्न स्तर हैं:

ब्राउज़र	संस्करण	समर्थन में
इंटरनेट एक्स्प्लोरर	5.5	normal | nowrap
	6.0	normal | pre | nowrap
	8+	normal | pre | nowrap | pre-wrap | pre-line
फ़ायरफ़ॉक्स (गेको)	1.0 (1.0)	normal | pre | nowrap | -moz-pre-wrap
	3.0 (1.9)	normal | pre | nowrap | pre-wrap | -moz-pre-wrap
	3.5 (1.9.1)	normal | pre | nowrap | pre-wrap | pre-line
ओपेरा	4.0	normal | pre | nowrap
	8.0	normal | pre | nowrap | pre-wrap
	9.5	normal | pre | nowrap | pre-wrap | pre-line
सफ़ारी (वेबकीट)	1.0 (85)	normal | pre | nowrap
	3.0 (522)	normal | pre | nowrap | pre-wrap | pre-line