CSS break-before Thuộc tính
Thí dụ
Luôn chèn dấu ngắt trang trước phần tử <h1>:
@media print
{
h1 {
break-before: always;
}
}
Định nghĩa và Cách sử dụng
Thuộc break-before
tính chỉ định xem có nên xảy ra ngắt trang, ngắt cột hoặc ngắt vùng trước phần tử được chỉ định hay không.
Thuộc break-before
tính mở rộng thuộc tính CSS2 .
page-break-before
Bằng cách sử dụng break-before
, bạn có thể yêu cầu trình duyệt ngắt trang, cột hoặc vùng trước khi phần tử mà thuộc break-before
tính được áp dụng hoặc tránh phần tử bị tách và kéo dài trên hai trang.
Giá trị mặc định: | Tự động |
---|---|
Thừa hưởng: | không |
Hoạt hình: | không. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.breakBefore = "always" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
break-before | 50.0 | 10.0 | 65.0 | 10.0 | 37.0 |
Cú pháp CSS
break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Default. Automatic page/column/region break before the element |
all | Always insert a page-break right before the principal box |
always | Always insert a page-break before the element |
avoid | Avoid a page/column/region break before the element |
avoid-column | Avoid a column-break before the element |
avoid-page | Avoid a page-break before the element |
avoid-region | Avoid a region-break before the element |
column | Always insert a column-break before the element |
left | Insert one or two page-breaks before the element so that the next page is formatted as a left page |
page | Always insert a page-break before the element |
recto | Insert one or two page-breaks before the principal box so that the next page is formatted as a recto page |
region | Always insert a region-break before the element |
right | Insert one or two page-breaks before the element so that the next page is formatted as a right page |
verso | Insert one or two page-breaks before the principal box so that the next page is formatted as a verso page |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Để đảm bảo rằng tất cả các chương mới phải bắt đầu trên đúng trang (như trong sách) khi được in, bạn có thể sử dụng break-before: right cho tất cả các phần tử <h1>:
@media print
{
h1 {
break-before: right;
}
}
Thí dụ
Luôn chèn dấu ngắt vùng trước <ul> phần tử trong một vùng:
.region ul {
break-before: region;
}
}