HTML DOM स्टाइल व्हाइटस्पेस प्रॉपर्टी वापस आती है और HTML दस्तावेज़ में किसी तत्व के टेक्स्ट में टैब, लाइन ब्रेक और व्हाइटस्पेस को संभालने का तरीका संशोधित करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
-
व्हाइटस्पेस लौट रहा है
object.style.whiteSpace
-
व्हाइटस्पेस को संशोधित करना
object.style.whiteSpace = “value”
मान
यहाँ, मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| आरंभिक | इसने इस गुण मान को इसके डिफ़ॉल्ट मान पर सेट किया। |
| उत्तराधिकारी | यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है। |
| सामान्य | इसमें व्हॉट्सएप का क्रम एक में सिमट जाएगा और जरूरत पड़ने पर टेक्स्ट रैप हो जाएगा। |
| nowrap | इसमें व्हॉट्सएप का क्रम एक में सिमट जाएगा और टेक्स्ट अगली पंक्ति में नहीं लपेटेगा। |
| पूर्व | इसमें व्हाइटस्पेस ब्राउज़र द्वारा संरक्षित किया जाता है और टेक्स्ट केवल तभी रैप होगा जब एक लाइन ब्रेक एनकाउंटर होगा। |
| प्री-लाइन | इसमें व्हॉट्सएप का क्रम एक में सिमट जाएगा और टेक्स्ट केवल आवश्यक होने पर ही अगली पंक्ति में आ जाएगा। |
| प्री-रैप | इसमें व्हाइटस्पेस ब्राउज़र द्वारा संरक्षित किया जाता है और टेक्स्ट केवल आवश्यक होने पर ही अगली पंक्ति में रैप होगा। |
उदाहरण
आइए हम HTML DOM स्टाइल व्हाइटस्पेस प्रॉपर्टी का एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
border: 2px solid #fff;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style whiteSpace Property Example</h1>
<p>
I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
I'm paragraph element with some dummy text.
</p>
<button onclick="add()" class="btn">Change whiteSpace</button>
<script>
function add() {
document.querySelector('p').style.whiteSpace = "pre-line";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
“व्हाइटस्पेस बदलें . पर क्लिक करें अनुच्छेद तत्व के रिक्त स्थान को संभालने के तरीके के व्यवहार को बदलने के लिए बटन -
