पृष्ठ-ब्रेक-इन:

Question

पर काम न करने से बचें मेरे पास मेरी (वर्डप्रेस) साइट के लिए एक प्रिंट स्टाइलशीट है, और मैं छवियों को पृष्ठों पर विभाजित होने के बजाय एक पृष्ठ पर प्रिंट करना चाहता हूं। कुछ मामलों में, पृष्ठों की भी पंक्तियों को पृष्ठों में विभाजित किया जा रहा है। मैंने अपनी प्रिंट स्टाइलशीट में img {page-break: avoid;) शामिल किया है, लेकिन कोई भाग्य नहीं है। मुझे कुछ पिछले जवाब मिल गए हैं लेकिन वे पुराने हैं।

क्या पृष्ठों पर इसे विभाजित करने के बजाय एक पृष्ठ पर एक मामूली आकार की छवि मुद्रित करने का कोई विश्वसनीय तरीका है? पृष्ठों में टेक्स्ट तोड़ने की रेखाएं क्यों हैं?

साइट: http://74.220.217.211/housing-developments/grafton-townhomes/

संबंधित पोस्ट:

• Print styles: How to ensure image doesn't span a page break

• What are most useful media="print" specfic ,cross browser compatible css properties?

• What is the correct way to do the CSS to avoid page breaks?

• page-break-inside doesn't work in Chrome?
• Work around for page-break-inside:avoid

Answer 1

इस प्रयास करें:

.site-container, .site-inner (heck body tag possibly) {position:relative;} 

p { 
    page-break-inside: avoid; 
    position: relative; 
} 

चेक इस FIDDLE

कि जोड़े अपने प्रिंट मीडिया में

मैं बस Chrome में इस की समीक्षा करने और यह ठीक लग रहा है शून्य से छवि है जो भी इस की जरूरत है: यकीन नहीं अगर यह मदद करता है

img { 
    page-break-before: auto; 
    page-break-after: auto; 
    page-break-inside: avoid; 
    display: block; 
} 

अन्त में Wordpress इस है लेकिन वास्तविकता में ...

<!--nextpage--> 

Answer 2

मुझे लगता है कि समस्या position तत्वों की संपत्ति से हो सकती है। तत्व आप पेज अंत में तोड़ने के लिए नहीं करना चाहते हैं और इसके जनक के रूप में घोषित किया जाना चाहिए:

position: relative; 

कोड शैलियों के बाकी सही है और चाहिए कोशिश

तरह

@media print { 
    img { 
     page-break-before: auto; 
     page-break-after: auto; 
     page-break-inside: avoid; 
     position: relative; 
    } 
}