CSS break-before गुण

व्याख्या और उपयोग

break-before एलिमेंट निर्धारित एलिमेंट के पहले पृष्ठ (page-break), स्तम्भ (column-break) या क्षेत्र (region-break) के लिए क्या होना चाहिए का प्रतिबिंबित करता है。

break-before एलिमेंट CSS2 के page-break-before एलिमेंट का विस्तार करता है。

break-before का उपयोग करके, आप ब्राउज़र को सूचित कर सकते हैं कि वह break-after एलिमेंट के पहले पृष्ठ, स्तम्भ या क्षेत्र को तोड़े या एलिमेंट को दो पृष्ठों पर बिखराने से बचाने के लिए क्या करना है。

उदाहरण

एक सबसे पहले <h1> एलिमेंट में पृष्ठ फ़ाइल को जोड़ें:

@media print {
  h1 {
    break-before: always;
  }
}

CSS व्याकरण

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

गुण मूल्य

मूल्य वर्णन
auto मूलभूत. एलिमेंट के पहले स्वचालित रूप से पेज, कॉलम, रीजन ब्रेक करें。
all हमेशा मुख्य बॉक्स के पहले तुरंत पेज-ब्रेक जोड़ें。
always हमेशा एलिमेंट के पहले पेज-ब्रेक (page-break) जोड़ें。
avoid एलिमेंट के पहले पृष्ठ, कॉलम, रीजन ब्रेक से बचें。
avoid-column एलिमेंट के पहले कॉलम ब्रेक से बचें。
avoid-page एलिमेंट के पहले पेज ब्रेक से बचें。
avoid-region एलिमेंट के पहले रीजन ब्रेक से बचें。
column हमेशा एलिमेंट के पहले एक कॉलम-ब्रेक जोड़ें。
left एलिमेंट के पहले एक या दो पेज-ब्रेक जोड़ें, ताकि अगला पृष्ठ बाएँ पृष्ठ के रूप में फॉर्मेट किया जा सके。
page हमेशा एलिमेंट के पहले एक पेज-ब्रेक जोड़ें。
recto पहले एक या दो पेज-ब्रेक जोड़ें, ताकि अगला पृष्ठ recto पृष्ठ के रूप में फॉर्मेट किया जा सके。
region हमेशा एलिमेंट के पहले एक रीजन-ब्रेक जोड़ें。
right एलिमेंट के पहले एक या दो पेज-ब्रेक जोड़ें, ताकि अगला पृष्ठ दायाँ पृष्ठ के रूप में फॉर्मेट किया जा सके。
verso पहले एक या दो पेज-ब्रेक जोड़ें, ताकि अगला पृष्ठ verso पृष्ठ के रूप में फॉर्मेट किया जा सके。
initial इस गुण को उसके मूलभूत मूल्य पर सेट करें. देखें initial。
inherit इस गुण को अपने माता एलिमेंट से विरासत करें. देखें inherit。

तकनीकी विवरण

मूलभूत मूल्य: auto
विरासत: नहीं
एनीमेशन निर्माण: निर्दोष. देखें:एनीमेशन संबंधी गुण。
संस्करण: CSS3
JavaScript व्याकरण: object.style.breakBefore="always"

और अधिक उदाहरण

उदाहरण

छापने के लिए सभी नए अध्याय को सही पृष्ठ (जैसे पुस्तक में) से शुरू होने वाले यह सुनिश्चित करने के लिए, आप सभी <h1> एलिमेंट्स पर break-before: : का उपयोग कर सकते हैं:

@media print {
  h1 {
    break-before: right;
  }
}

उदाहरण

हमेशा region में <ul> के पहले एक region-break: जोड़ें:

.region ul {
    break-before: region;
  }
}

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

तालिका में दिए गए नंबर इस गुण का पूर्ण समर्थन करने वाले पहले ब्राउज़र का संस्करण को दर्शाते हैं。

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0