You are here

CSS page-break-before

จดไว้เดี๋ยวลืม

ความต้องการคือ สั่งพิมพ์จากหน้าเวบ แล้วให้มันแบ่งหน้าให้ตรงจุดที่เราต้องการให้ขึ้นหน้าใหม่
คุ้นๆ ว่า CSS มันมีพร็อพเพอตี้ตัวนึง เลยไปหาดูใน W3C
แล้วก็เจอตัวอย่าง เค้าใช้แบบนี้

ในแท็ก style ก็สร้างคลาสสำหรับ div ขั้นมาคลาสนึง
สมมุติตั้งว่า pageBreak ก็จะเป็นแบบนี้

<style>
    div.pageBreak { page-break-before: always; }
</style>

เวลาจะใช้ ก็ใส่แท็ก div ตรงที่จะให้ขึ้นหน้าใหม่เวลาสั่งพิมพ์

<div class="pageBreak"></div>

ง่ายๆ แค่นี้แหละ
ลองทดสอบดู

<html><head>
<style>
    div.pageBreak { page-break-before: always; }
</style>
</head>
<body>
xxxxx
<div class="pageBreak"></div>
yyyyy
<div class="pageBreak"></div>
zzzzz
</body>
</html>

เรียบร้อย...เปิดดูแล้วกด Print Preview...x, y, z พิมพ์แยกกัน 3 หน้าถูกต้อง

ที่จริงในตัวอย่างเค้าเขียนแท็ก div แบบนี้
<div class="pageBreak" />
ซึ่งปรากฏว่าบน IE มันแสดงผลถูกจริง แต่พอใช้ Firefox แล้วเจ๊ง
y กับ z มันอยู่หน้าเดียวกันเฉยไม่ยอมแยก ก็เลยต้องเขียน <div></div> อย่างที่เห็น
เพื่อให้ใช้ได้ทั้งสองบราวเซอร์หลักๆ นี่ก่อน
(ดูเหมือนจิ้งจอกไฟยังไม่ซัพพอร์ตการย่อปิดแท็กที่ควรมีอิลิเมนท์
เลยเขียนแบบในตัวอย่างไม่ได้)

วันนี้เอาแค่นี้ก่อน ^_^

Topic: 

Comments

I absoⅼutelу love your site.. Great colors & theme.
Did yoou buіold this web site yourseⅼf? Please reply back as I'm attempting to create
my very own blog and would liкe to learn where you got tһis
from or just what the tһeme is calⅼed. Thank you!

my blog: hammer of thor

Yes! Finalⅼy something about hammer of thoг asli.

My homepage hargɑ thor's hammer (Brooke)

Add new comment