Không có page-breakthuộc tính thực tế nào trong CSS. Nó thực sự là một tập hợp của 3 thuộc tính: page-break-before, page-break-aftervà page-break-inside. Các thuộc tính này giúp xác định cách tài liệu sẽ hoạt động khi được in. Ví dụ: để làm cho tài liệu in giống sách hơn.
Tính chất
ngắt trang trước
Các page-break-beforebất động sản cho biết thêm một trang-break trước phần tử mà nó được áp dụng.
Lưu ý : thuộc tính này đang được thay thế bằng thuộc tính chung chung hơn break-before. Thuộc tính mới này cũng xử lý các ngắt cột và vùng trong khi tương thích về mặt cú pháp với page-break-before. Vì vậy, trước khi sử dụng page-break-before, hãy kiểm tra xem bạn có thể sử dụng break-beforethay thế hay không.
Một trường hợp sử dụng phổ biến cho điều này là áp dụng nó cho bộ chọn #commentsđể người dùng in một trang có nhận xét có thể dễ dàng chọn in toàn bộ tài liệu nhưng dừng lại trước khi nhận xét rõ ràng.
ngắt trang sau
Các page-break-afterbất động sản cho biết thêm một trang-break sau khi các yếu tố mà nó được áp dụng.
Lưu ý : thuộc tính này đang được thay thế bằng thuộc tính chung chung hơn break-after. Thuộc tính mới này cũng xử lý các ngắt cột và vùng trong khi tương thích về mặt cú pháp với page-break-after. Vì vậy, trước khi sử dụng page-break-after, hãy kiểm tra xem bạn có thể sử dụng break-afterthay thế hay không.
trang-break-inside
Các page-break-insidebất động sản cho biết thêm một trang-break bên trong phần tử mà nó được áp dụng.
Cú pháp
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidCác giá trị leftvà rightgiá trị cho page-break-beforevà page-break-aftertham chiếu đến một bố cục dàn trải (như một cuốn sách) trong đó có các trang bên trái và bên phải riêng biệt. Chúng hoạt động như thế này:
leftbuộc ngắt một hoặc hai trang sau phần tử để trang tiếp theo được định dạng là trang bên trái.rightbuộc ngắt một hoặc hai trang sau phần tử để trang tiếp theo được định dạng là trang bên phải.
Coi alwaysnhư là sự kết hợp của cả hai. Đặc điểm kỹ thuật cho biết:
Tác nhân người dùng phù hợp có thể diễn giải các giá trị 'left' và 'right' là 'always'.
Thí dụ
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Đoạn mã này thực hiện 3 việc:
- nó buộc ngắt trang trước tất cả
h2các tiêu đề (có lẽ thẻ h2 trong tài liệu của bạn là tiêu đề chương xứng đáng là trang mới) - nó ngăn chặn ngắt trang ngay sau các tiêu đề phụ vì điều đó trông kỳ lạ
- nó ngăn chặn ngắt trang bên trong
prethẻ và dấu ngoặc kép cấp khối
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Bất kì | Bất kì | Bất kì | 7+ | 4+ | TBD | TBD |
Bạn có thể in từ các thiết bị di động, như AirPrint trên iOS, nhưng chúng tôi chưa thử nghiệm nhiều điều này. Nếu ai có dữ liệu về hỗ trợ, hãy cho chúng tôi biết.