การพิมพ์ CSS: หลีกเลี่ยง DIV แบบครึ่งหน้าระหว่างหน้าหรือไม่

201

ฉันกำลังเขียนปลั๊กอินสำหรับชิ้นส่วนของซอฟต์แวร์ที่นำชุดใหญ่ของรายการและปรากฏใน HTML ใน WebView ใน Cocoa (ซึ่งใช้ WebKit เป็น renderer ดังนั้นโดยทั่วไปคุณสามารถสมมติว่าไฟล์ HTML นี้เปิดอยู่ Safari)

DIV นั้นสร้างมาจากความสูงแบบไดนามิก แต่ก็ไม่ได้แปรเปลี่ยนไปมากนัก พวกเขามักจะประมาณ 200px อย่างไรก็ตามมีรายการเหล่านี้ประมาณหกแสนรายการต่อเอกสารฉันมีเวลาที่ยากลำบากในการพิมพ์ นอกจากว่าฉันจะโชคดีมีรายการที่ตัดครึ่งที่ด้านล่างและด้านบนของทุกหน้าและนั่นทำให้การใช้งานพิมพ์จริงยากมาก

ฉันได้ลองใช้ตัวแบ่งหน้าก่อนหน้าตัวแบ่งหน้าแบ่งหน้าและชุดค่าผสมสามแบบที่ไม่มีประโยชน์ ฉันคิดว่าอาจเป็นเพราะ WebKit แสดงคำแนะนำไม่ถูกต้องหรืออาจเป็นเพราะฉันไม่เข้าใจวิธีใช้งาน ฉันต้องการความช่วยเหลือ ฉันจะป้องกันไม่ให้ครึ่งหนึ่งของ DIV ของฉันถูกพิมพ์ได้อย่างไรเมื่อพิมพ์?

— joeylange
แหล่งที่มา

เตรียมเอกสารตัวอย่างพร้อมปัญหาที่คุณเห็นและบางทีเราสามารถช่วยได้!

— X-Istence

ฉันตอบคำถามที่คล้ายกันมากเกี่ยวกับการหลีกเลี่ยงการตัด div ในครึ่งที่นี่: stackoverflow.com/a/14348953/1026459

— Travis J

1

หมายเหตุ: คุณสมบัตินี้ไม่สามารถใช้กับองค์ประกอบที่อยู่ในตำแหน่ง (และเห็นได้ชัดว่ายังอยู่ในบล็อกแบบอินไลน์)

— Ujjwal Singh

339

สิ่งนี้น่าจะใช้ได้:

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

โปรดทราบการสนับสนุนเบราว์เซอร์ปัจจุบัน (12-03-2014) :

Chrome - 1.0+
Firefox (Gecko) - 19.0+
Internet Explorer - 8.0+
Opera - 7.0+
Safari - 1.3+ (312)

— Dmitri Farkov
แหล่งที่มา

7

มันควรจะทำงาน แต่มันก็ไม่ได้ ดูen.wikipedia.org/wiki/…สำหรับการสนับสนุนเบราว์เซอร์

— เกร็ก

1

ใช้งานได้ใน Safari 6 :) ซึ่งอยู่ในหน้าตัวอย่างของนักพัฒนาตอนนี้

— Linus Unnebäck

1

ทำงานใน Chrome V 27.0.1453.116

— T. Brian Jones

4

ทำงานใน Netscape ด้วย ขอบคุณ!

2

ทำไมคุณต้องพิมพ์สื่อ? มันเหมือนกันถ้าไม่ใช้สื่อสิ่งพิมพ์และกฎถูกนำไปใช้โดยตรงกับ div?

— FrenkyB

21

วิธีแก้ปัญหาบางส่วนเท่านั้น: วิธีเดียวที่ฉันจะทำให้การทำงานสำหรับ IE คือการรวม div แต่ละตัวไว้ในตารางของตัวเองและตั้งค่าการแบ่งหน้าในตารางเพื่อหลีกเลี่ยง

— ไม่ใช่ฉัน
แหล่งที่มา

@ Easwee: ขอบคุณ downvote เกิดขึ้นในเวลาเดียวกัน inquisitive_web_developer วางคำถามกับคำถาม ฉันเดาว่าเขา / เธอไม่ชอบมัน ;)

— NotMe

3

สวย! คุณเป็นผู้ชนะ ฉันได้รับการมองหาวิธีการทำเช่นนี้ในwkhtmltopdfซึ่งไม่สนับสนุนpage-break-inside: avoid;อย่างถูกต้อง ในที่สุดฉันก็มีวิธีแก้ปัญหาที่เหมาะสม

— เดฟ

2

ทดสอบการแบ่งหน้าใน wkhtmltopdf ในเวอร์ชัน 0.11 และใช้งานได้

— cmc

ทดสอบกับ wkhtmltopdf 0.12.2.1 ไม่ต้องการ Div Div ในตารางอีกต่อไปเพียงแค่ใส่ตัวแบ่งหน้า: หลีกเลี่ยงตัวเลือก div Works!

— Paul Marti

12

page-break-inside: avoid; ทำให้ฉันมีปัญหาในการใช้ wkhtmltopdf

เพื่อหลีกเลี่ยงตัวแบ่งในข้อความเพิ่มdisplay: table;ใน CSS ของ div ที่มีข้อความ

ฉันหวังว่ามันจะเหมาะกับคุณเช่นกัน ขอบคุณ JohnS

— Bonjowi
แหล่งที่มา

ฉันเกือบจะยอมแพ้กับช่องว่างที่ไม่ได้อธิบายที่ปรากฏที่นี่และเมื่อใช้page-break-before: always;กับ<div>องค์ประกอบ ค้นหาในมหาสมุทรของ SO โพสต์บทความเอกสารทางการและอะไรก็ตาม ไม่มีอะไรช่วย แต่คุณเพื่อนของฉันในที่สุดก็มาพร้อมกับสิ่งที่ฉันต้องการ! ไม่สามารถขอบคุณคุณมากพอมนุษย์ !! ฉันหวังว่าฉันจะได้รับกาแฟอย่างน้อยความรักจากอินเดีย!

— Jay Dadhania

6

การแบ่งหน้าภายใน: หลีกเลี่ยง; แน่นอนไม่ทำงานใน webkit ในความเป็นจริงเป็นปัญหาที่รู้จักกันมานานกว่า 5 ปีแล้วhttps://bugs.webkit.org/show_bug.cgi?id=5097

เท่าที่การวิจัยของฉันได้หายไปไม่มีวิธีใดที่จะทำให้สำเร็จ (ฉันกำลังหาวิธีแฮ็คของฉันเอง)

คำแนะนำที่ฉันสามารถให้คุณคือเพื่อให้การทำงานนี้ใน FF ห่อเนื้อหาที่คุณไม่ต้องการทำลายใน DIV (หรือที่เก็บข้อมูลใด ๆ ) ด้วยการล้น: auto (เพียงระวังอย่าทำให้แถบเลื่อนแปลก ๆ แสดงโดยการปรับขนาดภาชนะที่มีขนาดเล็กเกินไป)

น่าเศร้าที่ FF เป็นเบราว์เซอร์เดียวที่ฉันสามารถจัดการให้สำเร็จได้และ webkit เป็นสิ่งที่ฉันกังวลมากขึ้น

— Bob Monteverde
แหล่งที่มา

5

ค่าที่เป็นไปได้สำหรับการแบ่งหน้าเว็บคือ: auto, always, avoid, left, right

ฉันเชื่อว่าคุณไม่สามารถใช้คุณสมบัติแบ่งหน้าหลังได้กับองค์ประกอบที่มีตำแหน่งแน่นอน

— ดอก
แหล่งที่มา

1

เห็นได้ชัดว่ามันใช้งานไม่ได้กับinline-blocks

— Ujjwal Singh

5

ฉันมีปัญหาเดียวกัน bu ยังไม่มีวิธีแก้ปัญหา การแบ่งหน้าไม่ทำงานบนเบราว์เซอร์ แต่เป็น Opera ทางเลือกอื่นอาจใช้การแบ่งหน้า - หลัง: หลีกเลี่ยง; ในองค์ประกอบย่อยทั้งหมดของ div เพื่อเก็บ togehter ... แต่ในการทดสอบของฉันการหลีกเลี่ยง - แอตทริบิวต์ไม่ทำงานเช่น ใน Firefox ...

สิ่งที่ใช้งานได้ในเบราว์เซอร์ ppular ทั้งหมดคือการบังคับให้แบ่งหน้าโดยใช้เช่น page-break-after: เสมอ

— Bjoern
แหล่งที่มา

สิ่งนี้ควรใช้กับ Webkit อย่างไรก็ตามคุณอาจจำเป็นต้องใส่สไตล์พิเศษจำนวนเล็กน้อยสำหรับการพิมพ์ด้วยการแบ่งหน้า: เสมอ; หลังจาก ~ ครึ่งโหลของหน่วยปกติของคุณ

— ʍǝɥʇɐɯ

3

ข้อผิดพลาดอย่างหนึ่งที่ฉันพบคือองค์ประกอบหลักที่มีแอตทริบิวต์ 'ล้น' กำหนดเป็น 'อัตโนมัติ' สิ่งนี้เป็นการลบองค์ประกอบย่อย ๆ ของเด็กด้วยแอททริบิวต์การแบ่งหน้าในรุ่นที่พิมพ์ มิฉะนั้นpage-break-inside: avoidทำงานได้ดีบน Chrome สำหรับฉัน

— Eric D.
แหล่งที่มา

2

ในกรณีของฉันฉันจัดการเพื่อแก้ไขปัญหาการแบ่งหน้าใน webkit โดยการตั้งค่า div ของฉันที่เลือกเป็นการแบ่งหน้า: หลีกเลี่ยงและการตั้งค่าองค์ประกอบทั้งหมดเพื่อแสดง: แบบอินไลน์ เช่นนี้

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

}

ดูเหมือนว่าคุณสมบัติตัวแบ่งหน้าสามารถใช้ได้กับองค์ประกอบแบบอินไลน์เท่านั้น (ใน webkit) ฉันพยายามที่จะใช้การแสดงผล: อินไลน์กับองค์ประกอบเฉพาะที่ฉันต้องการ แต่สิ่งนี้ไม่ได้ผล สิ่งเดียวที่ทำงานได้คือการใช้อินไลน์กับองค์ประกอบทั้งหมด ฉันคิดว่ามันเป็นหนึ่งในกองคอนเทนเนอร์ขนาดใหญ่ 'ที่ทำเรื่องยุ่ง ๆ

บางทีใครบางคนสามารถขยายในเรื่องนี้

— Waltur Buerk
แหล่งที่มา

1

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

สำหรับเบราว์เซอร์ใหม่ทั้งหมดวิธีนี้ใช้งานได้ ดู caniuse.com/#search=page-break-inside

— Naun Lemos
แหล่งที่มา

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; }
}

หวังว่านี่จะช่วยให้ผู้ที่บ่นว่า "การแบ่งหน้าภายในไม่ทำงาน"

— Eric Wendelin
แหล่งที่มา