अनाथ सीएसएस: नीचे पृष्ठ पर हेडर (एच 1, एच 2 ...) से कैसे बचें?

Question

मेरे पास हेडर (एच 1, एच 2, एच 3 ...) और पैराग्राफ के साथ एक बड़ा HTML दस्तावेज़ है। जब मैं दस्तावेज़ प्रिंट, मुझे लगता है कि, स्वचालित रूप से, दस्तावेज़ के नीचे हेडर अगले पृष्ठ पर जाने हैं:

मैं कैसे कर सकता है? मैं पैराग्राफ के साथ "अनाथ: 3" सीएसएस का उपयोग करता हूं और "पी" टैग के साथ काम करता हूं, लेकिन एच 1 या एच 2 के साथ काम नहीं करता है।

@page { 
    size: A4; 
} 

p { 
    orphans:3; 
} 

h1, h2 { 
    orphans:3 
} 

Full example on action जहां:

• 1-2 पेज: पैराग्राफ अनाथ ठीक काम करता है।
• 2-3 पृष्ठ: शीर्षलेख काम नहीं करते हैं।

आवश्यकताएँ:

• एचटीएमएल एक मुख्य div कंटेनर की है।
• HTML को न बदलें।
• ब्राउज़र समर्थन महत्वपूर्ण नहीं है (मेरे विशिष्ट काम पर)।
• मुझे सीएसएस में कुछ चाल की आवश्यकता है (कोई जेएस या Jquery, अधिमानतः)
• मैं पृष्ठ-ब्रेक-पहले का उपयोग नहीं कर सकता: हमेशा क्योंकि मैं चाहता हूं कि हेडर केवल पृष्ठ के नीचे दिखाई देने पर अगले पृष्ठ पर जाएं।

Answer 1

टाइपोग्राफी में एक अनाथ है:

एक पैरा खोलने लाइन है कि एक पृष्ठ या स्तंभ के नीचे से ही प्रकट होता है, इस प्रकार पाठ के बाकी हिस्सों से अलग कर दिया।

हालांकि HTML में <h1> और <p> अलग हैं पैराग्राफ तो क्या आप का उपयोग करने के break-after संपत्ति लेआउट इंजन बताने के लिए (कि पैरा के बाद एक पृष्ठ विराम डाल नहीं करने के लिए पक्ष प्रभाव के साथ अगले अनुच्छेद ऊपर ले जाने के लिए है पिछले पृष्ठ पर - अगर फिट - या संगतता के बारे में अगले पृष्ठ पर शीर्ष लेख स्थानांतरित करने के लिए

h1, h2 { 
    break-after: avoid-page; 
} 

नोट: break-after सेटिंग एक सच काम कर मसौदा है और यहां तक ​​कि बुनियादी सुविधाओं को व्यापक रूप से समर्थित नहीं हैं (कोई। tably इंटरनेट एक्सप्लोरर 10 करता है)। इस समाधान करने के लिए आप समान अर्थ के साथ एक और संपत्ति का उपयोग कर सकते हैं:

h1, h2 { 
    page-break-after: avoid; 
} 

ध्यान दें कि page-break-after दोनों पेज और स्तंभ पर लागू होता है।page-break-after अच्छी तरह से एफएफ (it is a bug) द्वारा समर्थित नहीं है तो अगर अनुकूलता महत्वपूर्ण है और पैरा एकाधिक पृष्ठों पर होते नहीं होगा यदि आप एक कंटेनर के अंदर <h1> और <p> लपेटकर वैकल्पिक हल कर सकते हैं (मान लीजिए कि <section> है) और फिर इस तरह page-break-inside लागू होते हैं:

section { 
    page-break-inside: avoid; 
} 

आईएमओ आपको page-break-after और page-break-insidepage-break-inside का उपयोग -moz उपसर्ग के साथ जोड़ना चाहिए जब तक कि वह उस बग को ठीक नहीं करेगा।