Hướng dẫn page-break-before css - ngắt trang trước css

  • Trang chủ
  • Tham khảo
  • CSS
  • Thuộc tính page-break-before

Định nghĩa và sử dụng

Thuộc tính page-break-before xác định các phân chia văn bản ngay trước thành phần.

Thuộc tính page-break-before thường sử dụng cho văn bản print.

Cấu trúc

tag {
    page-break-before: giá trị;
}

Với giá trị như sau:

Thuộc tínhgiá trịVí dụMô tả
page-break-before auto page-break-before: auto; Phân chia văn bản ngay trước thành phần nếu cần thiết, đây là dạng mặc định.
always page-break-before: always; Phân chia văn bản ngay trước thành phần.
avoid page-break-before: avoid; Tránh phân chia văn bản ngay trước thành phần.
left page-break-before: left; Phân chia văn bản ngay trước bên trái thành phần.
right page-break-before: right; Phân chia văn bản ngay trước bên phải thành phần.
inherit page-break-before: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Mô tả




HỌC WEB CHUẨN

HỌC WEB CHUẨN

page-break-before

auto

auto

page-break-before: auto;

p.breakBefore {
    page-break-before: always;
}

Phân chia văn bản ngay trước thành phần nếu cần thiết, đây là dạng mặc định.

auto

auto

page-break-before: auto;

Phân chia văn bản ngay trước thành phần nếu cần thiết, đây là dạng mặc định.

always

page-break-before: always;

  • Thông số kỹ thuật
  • Sự chỉ rõ
  • CSS Thuộc tính logic và giá trị cấp 1 # Trang
  • CSS phân trang mô-đun phương tiện Media 3 # Trang-Break-Before

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Trang chủ

tag {
    page-break-inside: giá trị;
}

Tham Khảo

CSSTHUộC TínH Trang-Break-InsideĐịnh nghĩa và sử dụngTHUộC TínH PAGE-BREAK-TIÊU CHUẨN XÁC ĐịNH
THUộC TínH PAGE-BREAK-TIÊU CHUẨN THườNG Sử DụNG CHO VĂN BảN IN.Cấu trúcVới giá trị như Sau:Thuộc Tính
Giá trịVí dụMô tả
Trang phá vỡ bên trongTự độngTrang-Break-Inside: Tự động;
Phân Chia văn bản ngay bênn trong thongluôn luônTrang phá vỡ trang: Luôn luôn;
Phân Chia Văn Bản Ngay Bênn Trong ThànH Phần.tránh xaTrang phá vỡ trang bên: Tránh;
Tránh phân Chia văn bản ngay bên trong thànH Phần.bên tráiTrang-Break-Inside: Trái;

Định nghĩa và sử dụng

THUộC TínH PAGE-BREAK-TIÊU CHUẨN XÁC ĐịNH




HỌC WEB CHUẨN

HỌC WEB CHUẨN

THUộC TínH PAGE-BREAK-TIÊU CHUẨN THườNG Sử DụNG CHO VĂN BảN IN.

Học Web Chuẩn

Học Web Chuẩn

Cấu trúc

p.breakInside {
    page-break-inside: always;
}

Với giá trị như Sau:

Học Web Chuẩn

Học Web Chuẩn

Trình diyệt hỗ trợ

THUộC TínH PAGE-BREAK-TIÊU CHUẨN ĐượC Hỗ TRU

Từ trình Duyệt IE8 trở Xuống Không Hỗ Trợ Giá Trị: trái, phải, kế thừa.

Từ trình Duyệt Firefox, Chrome, Safari Không Hỗ Trợ Giá Trị: Tránh, trái, phải.

Thông số kỹ thuật This property has been replaced by the break-before property.

Sự chỉ rõ




HỌC WEB CHUẨN

HỌC WEB CHUẨN

0 CSS property adjusts page breaks before the current element.

CSS Thuộc tính logic và giá trị cấp 1 # Trang

/* Keyword values */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/* Global values */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;

CSS phân trang mô-đun phương tiện Media 3 # Trang-Break-Before

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm




HỌC WEB CHUẨN

HỌC WEB CHUẨN

3

CẢNH BÁO: Tài sản này đã được thay thế bằng tài sản break-before.




HỌC WEB CHUẨN

HỌC WEB CHUẨN

4

Thuộc tính CSS điều chỉnh trang bị hỏng trước phần tử hiện tại.




HỌC WEB CHUẨN

HỌC WEB CHUẨN

5

Thuộc tính này áp dụng cho các yếu tố chặn tạo ra một hộp. Nó sẽ không áp dụng trên một




HỌC WEB CHUẨN

HỌC WEB CHUẨN

1 trống sẽ không tạo ra một hộp.




HỌC WEB CHUẨN

HỌC WEB CHUẨN

6

Cú pháp

Giá trịExperimental




HỌC WEB CHUẨN

HỌC WEB CHUẨN

2

Giá trị ban đầu. Phá vỡ trang tự động (không bị ép buộc cũng không bị cấm).Experimental

Luôn luôn buộc các trang bị hỏng trước phần tử.

Trang Break Bí danh

Thuộc tính




HỌC WEB CHUẨN

HỌC WEB CHUẨN

0 hiện là một tài sản kế thừa, được thay thế bằng break-before.

Vì lý do tương thích,




HỌC WEB CHUẨN

HỌC WEB CHUẨN

0 nên được các trình duyệt coi là bí danh của break-before. Điều này đảm bảo rằng các trang web sử dụng



HỌC WEB CHUẨN

HỌC WEB CHUẨN

0 tiếp tục hoạt động như được thiết kế. Một tập hợp con của các giá trị nên được có bí danh như sau:

page-break-beforebreak-before



HỌC WEB CHUẨN

HỌC WEB CHUẨN

2



HỌC WEB CHUẨN

HỌC WEB CHUẨN

2



HỌC WEB CHUẨN

HỌC WEB CHUẨN

5



HỌC WEB CHUẨN

HỌC WEB CHUẨN

5



HỌC WEB CHUẨN

HỌC WEB CHUẨN

6



HỌC WEB CHUẨN

HỌC WEB CHUẨN

6



HỌC WEB CHUẨN

HỌC WEB CHUẨN

4



HỌC WEB CHUẨN

HỌC WEB CHUẨN

4



HỌC WEB CHUẨN

HỌC WEB CHUẨN

3
tag {
    page-break-inside: giá trị;
}
7

Định nghĩa chính thức

Giá trị ban đầu



HỌC WEB CHUẨN

HỌC WEB CHUẨN

2



HỌC WEB CHUẨN

HỌC WEB CHUẨN

5



HỌC WEB CHUẨN

HỌC WEB CHUẨN

6



HỌC WEB CHUẨN

HỌC WEB CHUẨN

4



HỌC WEB CHUẨN

HỌC WEB CHUẨN

3
tag {
    page-break-inside: giá trị;
}
7
Định nghĩa chính thức
Giá trị ban đầuÁp dụng cho

Các phần tử cấp khối trong luồng bình thường của phần tử gốc. Đại lý người dùng cũng có thể áp dụng nó cho các yếu tố khác như các yếu tố tag { page-break-inside: giá trị; }9.

page-break-before = 
auto |
always |
avoid |
left |
right |
inherit

Thừa hưởng

không

/* Avoid page break before div elements of class note */
div.note {
  page-break-before: avoid;
}

Giá trị tính toán

theo quy định
Loại hoạt hình
# page
rời rạc
# page-break-before

Cú pháp chính thức

Ví dụ

Tránh ngắt trang trước một phần tử