सीएसएस प्रिंटिंग: पन्नों के बीच कट-इन-आधे DIVs से बचना?

199

मैं सॉफ्टवेयर के एक टुकड़े के लिए एक प्लग-इन लिख रहा हूं, जो आइटम्स का एक बड़ा संग्रह लेता है और उन्हें कोको में एक WebView में HTML में पॉप करता है (जो कि WebKit को इसके रेंडरर के रूप में उपयोग करता है, इसलिए मूल रूप से आप यह HTML फ़ाइल खोल सकते हैं। सफारी)।

यह DIVs गतिशील ऊंचाई के हैं, लेकिन वे बहुत अधिक भिन्न नहीं होते हैं। वे आमतौर पर 200px के आसपास होते हैं। वैसे भी, इन दस्तावेज़ों में से लगभग छह सौ के साथ, मुझे प्रिंट करने के लिए वास्तव में कठिन समय मिल रहा है। जब तक मैं भाग्यशाली नहीं हो जाता, तब तक हर पृष्ठ के नीचे और ऊपर आधे हिस्से में कटा हुआ एक प्रवेश होता है, और यह वास्तव में प्रिंटआउट का उपयोग करना बहुत कठिन बना देता है।

मैंने पृष्ठ-विराम-से पहले, पृष्ठ-विराम के बाद, पृष्ठ-विराम-अंदर और तीनों के संयोजन से कोई फायदा नहीं हुआ। मुझे लगता है कि यह WebKit निर्देशों का ठीक से प्रतिपादन नहीं कर सकता है, या शायद यह मेरी समझ है कि उन्हें कैसे उपयोग करना है। किसी भी दर पर, मुझे मदद की ज़रूरत है। मुद्रण करते समय मैं अपने DIVs के आधे हिस्से को कैसे रोक सकता हूं?

— joeylange
स्रोत

उस मुद्दे के साथ एक नमूना दस्तावेज़ प्रदान करें जिसे आप देख रहे हैं और शायद हम मदद कर सकते हैं!

— X-Istence

मैंने आधे हिस्से में विभाजन से बचने के बारे में एक बहुत ही समान प्रश्न का उत्तर दिया: stackoverflow.com/a/14348953/1026459

— ट्रैविस जे

1

नोट: इस संपत्ति का उपयोग पूरी तरह से तैनात (और जाहिर तौर पर इनलाइन-ब्लॉक) तत्वों पर भी नहीं किया जा सकता है।

— उज्जवल सिंह

335

यह काम करना चाहिए:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

कृपया वर्तमान ब्राउज़र समर्थन पर ध्यान दें (12-03-2014) :

क्रोम - 1.0+
फ़ायरफ़ॉक्स (गेको) - 19.0+
इंटरनेट एक्सप्लोरर - 8.0+
ओपेरा - 7.0+
सफारी - 1.3+ (312)

— दिमित्री फ़ारकोव
स्रोत

7

यह काम करना चाहिए । लेकिन यह नहीं है। ब्राउज़र समर्थन के लिए en.wikipedia.org/wiki/… देखें ।

— ग्रेग

1

सफारी 6 में काम करता है :) जो अब डेवलपर पूर्वावलोकन में है

— लाइनस उन्नेबेक

1

क्रोम V 27.0.1453.116 में काम करता है

— टी। ब्रायन जोन्स

4

नेटस्केप में भी काम करता है। धन्यवाद!

2

आपको मीडिया प्रिंट की आवश्यकता क्यों है? यदि मीडिया प्रिंट का उपयोग नहीं किया जाता है और नियम सीधे div पर लागू होता है तो क्या यह वही है?

— FrenkyB

21

केवल एक आंशिक समाधान: IE के लिए काम करने का एकमात्र तरीका मुझे यह है कि प्रत्येक डिव को स्वयं की तालिका में लपेटें और बचने के लिए पृष्ठ पर पृष्ठ-विराम-अंदर सेट करें।

— मैं नहीं
स्रोत

@easwee: धन्यवाद। डाउनवोट उसी समय हुआ जब जिज्ञासु_वेब_विकास ने प्रश्न पर एक इनाम रखा। मेरा अनुमान है कि उसे यह पसंद नहीं है। ;)

— NotMe

3

सुंदर! तुम एक चैंपियन हो; मैं wkhtmltopdf में ऐसा करने का तरीका ढूंढ रहा हूं , जो page-break-inside: avoid;ठीक से समर्थन न करे । अंत में मेरे पास एक अच्छा काम है।

— डेव

2

संस्करण 0.11 में wkhtmltopdf में पृष्ठ-विराम-परीक्षण किया गया और यह काम करता है।

— सेमी 23

Wttmltopdf 0.12.2.1 के साथ परीक्षण किया गया। तालिकाओं के अंदर div की जरूरत नहीं है, बस पृष्ठ-विराम को अंदर रखें: div चयनकर्ता से बचें। काम करता है!

— पॉल मार्टी

12

page-break-inside: avoid; मुझे wttmltopdf का उपयोग करने में परेशानी हुई।

पाठ में विराम से बचने display: table;के लिए पाठ-युक्त div के सीएसएस में जोड़ें ।

मुझे उम्मीद है कि यह आपके लिए भी काम करेगा। धन्यवाद JohnS।

— Bonjowi
स्रोत

मैंने लगभग अस्पष्ट स्थानों पर छोड़ दिया था जो तत्वों page-break-before: always;पर उपयोग करते समय यहां और वहां दिखाई देते थे <div>। एसओ पोस्ट, लेख, आधिकारिक डॉक्स और व्हाट्सएप के एक महासागर के माध्यम से खोजा गया। कुछ भी मदद नहीं की। लेकिन आप, मेरे दोस्त, आखिरकार मुझे क्या चाहिए था! आपको पर्याप्त धन्यवाद नहीं कर सकते, यार !! काश, मैं आपको भारत से कम से कम, बहुत प्यार कर पाता!

— जय दादानिया

6

पृष्ठ-विराम-अंदर: से बचें; निश्चित रूप से वेबकिट में काम नहीं करता है, वास्तव में 5+ वर्षों के लिए एक ज्ञात मुद्दा रहा है अब https://bugs.webkit.org/show_bug.cgi?id=5097

जहां तक मेरा शोध चला है, इसे पूरा करने के लिए कोई ज्ञात तरीका नहीं है (मैं अपनी खुद की हैकिंग का पता लगाने पर काम कर रहा हूं)

मैं आपको जो सलाह दे सकता हूं, वह एफएफ में इस कार्यक्षमता को पूरा करने के लिए, उस सामग्री को लपेटें जो आप नहीं करते हैं; अतिप्रवाह के साथ एक डीआईवी (या किसी भी कंटेनर) के अंदर कभी भी तोड़ना चाहते हैं: ऑटो (बस अजीब स्क्रॉल बार पैदा करने के लिए नहीं सावधान रहें कंटेनर को छोटा करके दिखाओ)।

अफसोस की बात है, एफएफ एकमात्र ऐसा ब्राउज़र है जिसे मैं इसे पूरा करने में कामयाब रहा, और वेबकिट वह है जिसके बारे में मैं अधिक चिंतित हूं।

— बॉब मोंटेवरडे
स्रोत

5

पृष्ठ-विराम के बाद के संभावित मान इस प्रकार हैं: auto, always, avoid, left, right

मेरा मानना है कि आप पूरी तरह से मौजूद तत्वों पर संपत्ति के बाद पृष्ठ-विराम का उपयोग नहीं कर सकते।

— DOK
स्रोत

1

जाहिर तौर पर यह inline-blockया तो काम नहीं करता है

— उज्जवल सिंह

5

मैं एक ही समस्या बू कोई समाधान अभी तक है। पेज-ब्रेक-इन ब्राउज़र ब्राउज़रों पर काम नहीं करता है। एक विकल्प पृष्ठ-विराम के बाद उपयोग करने के लिए हो सकता है : बचना; togehter रखने के लिए div के सभी बच्चे तत्वों पर ... लेकिन मेरे परीक्षणों में, एटो-एट्रिब्यूट काम नहीं करता है उदा। फ़ायरफ़ॉक्स में ...

सभी ppular ब्राउज़रों में जो काम करता है, उसे मजबूरन पेज ब्रेक का उपयोग किया जाता है जैसे। पृष्ठ-विराम के बाद: हमेशा

— जोएर्न
स्रोत

यह वेबकिट के साथ काम करना चाहिए। हालाँकि आपको पृष्ठ-विराम के बाद प्रिंट के लिए स्टाइल किए गए कुछ अतिरिक्त divs में रखना पड़ सकता है: हमेशा; ~ अपने नियमित divs के आधा दर्जन के बाद।

— ʍǝɥʇɐɯ

3

मैं जिस गड्ढे में चला गया, वह एक मूल तत्व था जिसमें 'ऑटो' के लिए 'अतिप्रवाह' विशेषता निर्धारित थी। यह प्रिंट संस्करण में पृष्ठ-ब्रेक-इन विशेषता के साथ बाल div तत्वों को नकारता है। अन्यथा, page-break-inside: avoidमेरे लिए Chrome पर ठीक काम करता है।

— एरिक डी।
स्रोत

2

मेरे मामले में मैंने अपने चयनित divs को पेज-ब्रेक-इन: टालने से बचें, और इनलाइन दिखाने के लिए सभी तत्वों को सेट करके वेबकिट में पेज ब्रेक की कठिनाइयों को भी ठीक करने में कामयाब रहा। तो इस तरह से:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

ऐसा लगता है कि पृष्ठ-विराम-गुण केवल इनलाइन तत्वों (वेबकिट में) पर ही लागू किए जा सकते हैं। मैंने केवल प्रदर्शन लागू करने की कोशिश की: मुझे जिन विशेष तत्वों की आवश्यकता थी, इनलाइन, लेकिन यह काम नहीं किया। केवल एक चीज जिसने काम किया वह सभी तत्वों को इनलाइन लागू कर रहा था। मुझे लगता है कि यह बड़े कंटेनर डिव में से एक है 'जो चीजों को गड़बड़ कर रहा है।

शायद कोई इस पर विस्तार कर सकता है।

— वाल्टूर बुर्क
स्रोत

1

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

सभी नए ब्राउज़र के लिए यह समाधान काम करता है। Caniuse.com/#search=page-break-inside देखें

— नून लेमोस
स्रोत

1

page-break-inside: avoid;हमेशा काम करने के लिए प्रतीत नहीं होता है । यह कंटेनर तत्वों की ऊंचाई और स्थिति को ध्यान में रखता है।

उदाहरण के लिए, जो inline-blockतत्व पृष्ठ से अधिक लंबे होते हैं वे क्लिप हो जाएंगे।

मैं page-break-inside: avoid;एक कंटेनर तत्व की पहचान करके display: inline-blockऔर जोड़कर कार्य की कार्यक्षमता को बहाल करने में सक्षम था :

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

आशा है कि यह उन लोगों की मदद करता है जो शिकायत करते हैं कि "पेज-ब्रेक-इन काम नहीं करता है"।

— एरिक वेंडेलिन
स्रोत