CSS ระบุ break-inside
- ข้างหลังหน้า break-before
- หน้าต่อไป caption-side
การกำหนดและการใช้
อาตริบิวต์ break-inside กำหนดว่าควรมีการแบ่งหน้า (page-break) หรือแบ่งคอลัมน์ (column-break) หรือแบ่งพื้นที่ (region-break) ภายในอีเลเมนต์ที่กำหนด
อาตริบิวต์ break-inside ขยายความหมายของอาตริบิวต์ page-break-inside ใน CSS2
ด้วยการใช้ break-inside คุณสามารถบอกบราวเซอร์ว่าหลีกเลี่ยงการตัดของในภาพสำรวจรหัสรวม ฐานข้อมูล ตารางและรายการ
ตัวอย่าง
หลีกเลี่ยงการแบ่งหน้าในอีเลเมนต์ <img>:
@media print {
img {
display: block;
break-inside: avoid;
}
}
ระบบการเขียน CSS
break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;
ค่าของอาตริบิวต์
| ค่า | คำอธิบาย |
|---|---|
| auto | ค่าเริ่มต้น。หลีกเลี่ยงการแบ่งหน้าหรือคอลัมน์หรือพื้นที่ในอีเลเมนต์โดยอัตโนมัติ |
| avoid | หลีกเลี่ยงการแบ่งหน้าหรือคอลัมน์หรือพื้นที่ในอีเลเมนต์ |
| avoid-column | หลีกเลี่ยงการแบ่งคอลัมน์ในอีเลเมนต์ |
| avoid-page | หลีกเลี่ยงการแบ่งหน้าในอีเลเมนต์ |
| avoid-region | หลีกเลี่ยงการแบ่งหน้าในอีเลเมนต์ |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู: initial。 |
| inherit | สืบทอดคุณสมบัตินี้จากอีเลเมนต์พ่อของเขา。ดู: inherit。 |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | auto |
|---|---|
| การสืบทอด: | ไม่ |
| การสร้างอนุรักษ์: | ไม่สนับสนุน。ดู:คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์。 |
| เวอร์ชั่น: | CSS3 |
| ระบบการเขียน JavaScript: | object.style.breakInside="always" |
ตัวอย่างเพิ่มเติม
หลีกเลี่ยงการแบ่งหน้าใน <table>、<ul>、<ol> อีเลเมนต์:
@media print {
table, ul, ol {
break-inside: avoid;
}
}
การสนับสนุนโปรแกรมนำทาง
ตัวเลขในตารางชี้ถึงเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้เต็มที่。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 50.0 | 10.0 | 65.0 | 10.0 | 37.0 |
- ข้างหลังหน้า break-before
- หน้าต่อไป caption-side
