HTML DOM Style pageBreakInside प्रॉपर्टी

विवरण

HTML DOM Style pageBreakInside प्रॉपर्टी HTML दस्तावेज़ में किसी HTML तत्व के अंदर प्रिंटिंग या प्रिंट प्रीव्यू के लिए पेज-ब्रेक व्यवहार को प्राप्त और संशोधित करती है।

सिंटैक्स

1. pageBreakInside प्राप्त करना

object.pageBreakInside

2. pageBreakInside संशोधित करना

object.pageBreakInside = "value"

यहां, value निम्नलिखित हो सकते हैं:

उदाहरण

आइए HTML DOM Style pageBreakInside प्रॉपर्टी का एक उदाहरण देखें:

<!DOCTYPE html> <html> <style> 
  body { 
    color: #000; 
    height: 100vh; 
    background-color: #8BC6EC; 
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); 
  } 
  .btn { 
    background: #db133a; 
    border: none; 
    height: 2rem; 
    border-radius: 2px; 
    width: 40%; 
    display: block; 
    color: #fff; 
    outline: none; 
    cursor: pointer; 
    margin: 1rem auto; 
  } 
  p { 
    text-align: center; 
  } 
</style> <body> 
<h1 style="text-align:center">DOM Style pageBreakInside प्रॉपर्टी डेमो</h1> 
<p> नमस्ते! मैं कुछ डमी टेक्स्ट के साथ एक पैरा एलिमेंट हूँ। नमस्ते! मैं कुछ डमी टेक्स्ट के साथ एक पैरा एलिमेंट हूँ। </p> 
<p class="page-break"> नमस्ते! मैं कुछ डमी टेक्स्ट के साथ दूसरा पैरा एलिमेंट हूँ। नमस्ते! मैं कुछ डमी टेक्स्ट के साथ दूसरा एलिमेंट हूँ। </p> 
<button onclick="set()" class="btn">यहां पेज ब्रेक सेट करें</button> 
<p> नमस्ते! मैं कुछ डमी टेक्स्ट के साथ एक और पैरा एलिमेंट हूँ। नमस्ते! मैं कुछ डमी टेक्स्ट के साथ एक और पैरा एलिमेंट हूँ। </p> 
<script> 
  function set() { 
    document.querySelector(".page-break").style.pageBreakInside = "avoid"; 
  } 
</script> </body> </html>

आउटपुट

अब प्रिंट प्रीव्यू खोलें और देखें कि हमारा HTML पेज कैसे प्रदर्शित होगा। फिर लाल बटन पर क्लिक करके दस्तावेज़ में पेज-ब्रेक व्यवहार से बचें: