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

परिचय

HTML DOM Style pageBreakBefore प्रॉपर्टी HTML दस्तावेज़ में प्रिंटिंग या प्रिंट प्रीव्यू के लिए किसी HTML एलिमेंट से पहले पेज-ब्रेक व्यवहार को निर्दिष्ट करती है। यह प्रिंट लेआउट को नियंत्रित करने के लिए उपयोगी है।

सिंटैक्स

1. pageBreakBefore मान प्राप्त करना

object.style.pageBreakBefore

2. pageBreakBefore मान सेट करना

object.style.pageBreakBefore = "value"

मान

उदाहरण

इस उदाहरण में, तीन पैराग्राफ हैं। दूसरे पैराग्राफ पर pageBreakBefore: "always" सेट किया जाता है जब "Break Page Here" बटन पर क्लिक किया जाता है।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
  }
  .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;
    margin: 1rem 0;
  }
</style>
<body>
<h1 style="text-align:center">DOM Style pageBreakBefore प्रॉपर्टी डेमो</h1>
<p>नमस्ते! मैं कुछ डमी टेक्स्ट वाला एक पैरा एलिमेंट हूँ। नमस्ते! मैं कुछ डमी टेक्स्ट वाला एक पैरा एलिमेंट हूँ।</p>
<p class="page-break">नमस्ते! मैं कुछ डमी टेक्स्ट वाला दूसरा पैरा एलिमेंट हूँ। नमस्ते! मैं कुछ डमी टेक्स्ट वाला दूसरा एलिमेंट हूँ।</p>
<button onclick="setPageBreak()" class="btn">यहां पेज ब्रेक करें</button>
<p>नमस्ते! मैं कुछ डमी टेक्स्ट वाला एक और पैरा एलिमेंट हूँ। नमस्ते! मैं कुछ डमी टेक्स्ट वाला एक और पैरा एलिमेंट हूँ।</p>
<script>
  function setPageBreak() {
    document.querySelector(".page-break").style.pageBreakBefore = "always";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में सभी पैराग्राफ एक ही पेज पर दिखाई देते हैं। "यहां पेज ब्रेक करें" बटन पर क्लिक करने के बाद, प्रिंट प्रीव्यू खोलने पर दूसरा पैराग्राफ नए पेज पर शुरू होगा।

उपयोग के मामले

• प्रिंट के लिए चैप्टर/सेक्शन को नए पेज पर शुरू करना
• टेबल या इमेज को पेज के बीच में टूटने से बचाना
• दो-तरफा प्रिंटिंग के लिए लेफ्ट/राइट पेज नियंत्रण

नोट

यह प्रॉपर्टी केवल प्रिंटिंग/प्रिंट प्रीव्यू को प्रभावित करती है, स्क्रीन डिस्प्ले को नहीं। आधुनिक CSS में break-before प्रॉपर्टी इसका अधिक शक्तिशाली विकल्प है।

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

सभी ब्राउज़रों में प्रिंट मीडिया के लिए समर्थित।