CSS การแบ่งแยกก่อน

การระบุและวิธีใช้

break-before กำหนดว่าควรมีการทำหน้าประหยัด (page-break) หรือทำบรรทัด (column-break) หรือทำพื้นที่ (region-break) ก่อนตัวอย่างหรือไม่

break-before ยังขยายจาก attribute page-break-before ใน CSS2

ด้วยการใช้ break-before คุณสามารถบอกให้เบราเซอร์ทราบว่าต้องการหยุดหน้าในบริเวณหรือในบรรทัดหรือในพื้นที่ก่อนหน้าที่จะใช้ตัวอย่าง break-after หรือหลีกเลี่ยงการแบ่งตัวอย่างและเปิดบทบาทในสองหน้า

ตัวอย่าง

เข้าใจได้ว่าเราจะใส่หลักฐานหลังจาก <h1> ตัวอย่าง

@media print {
  h1 {
    break-before: always;
  }
}

CSS ยังเนียน

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

ค่าคุณสมบัติ

ค่า คำอธิบาย
auto ค่าเริ่มต้น。ทำการแบ่งหน้า แบ่งคอลัมน์ แบ่งพื้นที่โดยอัตโนมัติก่อนหน้านี้ในองค์ประกอบ
all ใส่เซอร์ฟีส์ก่อนหน้านี้ในกล่องหลักทันทีตลอดเวลา
always ใส่เซอร์ฟีส์ก่อนหน้านี้ในองค์ประกอบตลอดเวลา (page-break)
avoid หลีกเลี่ยงการที่จะมีการตัดของหน้า คอลัมน์ หรือพื้นที่ก่อนหน้านี้ในองค์ประกอบ
avoid-column หลีกเลี่ยงการใส่เซอร์ฟีส์ก่อนหน้านี้ในคอลัมน์
avoid-page หลีกเลี่ยงการใส่เซอร์ฟีส์ก่อนหน้านี้ในหน้า
avoid-region หลีกเลี่ยงการใส่เซอร์ฟีส์ก่อนหน้านี้ในองค์ประกอบ
column ใส่เซอร์ฟีส์ก่อนหน้านี้ในองค์ประกอบตลอดเวลา
left ใส่เซอร์ฟีส์หนึ่งหรือสองเซอร์ฟีส์ก่อนหน้านี้ในองค์ประกอบเพื่อที่จะทำให้หน้าต่อไปมีรูปแบบว่าหน้าซ้าย
page ใส่เซอร์ฟีส์ก่อนหน้านี้ในองค์ประกอบตลอดเวลา
recto ใส่เซอร์ฟีส์หนึ่งหรือสองเซอร์ฟีส์ก่อนหน้านี้ในกล่องหลักเพื่อที่จะทำให้หน้าต่อไปมีรูปแบบว่า recto หน้า
region ใส่เซอร์ฟีส์ก่อนหน้านี้ในองค์ประกอบตลอดเวลา
right ใส่เซอร์ฟีส์หนึ่งหรือสองเซอร์ฟีส์ก่อนหน้านี้ในองค์ประกอบเพื่อที่จะทำให้หน้าต่อไปมีรูปแบบว่าหน้าขวา
versa ใส่เซอร์ฟีส์ทางด้านหน้าหนึ่งหรือสองเซอร์ฟีส์ก่อนหน้านี้ในกล่องหลักเพื่อที่จะทำให้หน้าต่อไปมีรูปแบบว่า versa หน้า
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น ดูข้อมูลเพิ่มเติมที่ initial。
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน ดูข้อมูลเพิ่มเติมที่ inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น： auto
มีการสืบทอดมาจาก ไม่
การสร้างแอนิเมชัน： ไม่สนับสนุน。ดูข้อมูลเพิ่มเติมที่：คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์ทางด้านหน้า。
เวอร์ชั่น： CSS3
ระบบการเขียนภาษา JavaScript: object.style.breakBefore="always"

ตัวอย่างเพิ่มเติม

ตัวอย่าง

เพื่อให้เห็นว่าทุกส่วนที่เรียกว่าหัวข้อในการพิมพ์ควรเริ่มต้นจากหน้าที่ถูกต้อง (เช่น ในหนังสือ) คุณสามารถใช้ break-before: สำหรับทุกองค์ประกอบ <h1> ต่างๆ ได้

@media print {
  h1 {
    break-before: right;
  }
}

ตัวอย่าง

เข้าสู่ <ul> ก่อนหน้านี้ใน region ตลอดเวลาด้วย region-break：

.region ul {
    break-before: region;
  }
}

การสนับสนุนโปรแกรมน่าที่ใช้

ตารางหลักแสดงเลขระบุว่าบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0