12/08/2018, 15:28

Page Break

page-break thực tế nó là thuộc tính của CSS bao gồm một bộ 3 thuộc tính page-break-before, page-break-after and page-break-inside. Nó giúp cho việc định nghĩa các tài liệu trước khi in Properties page-break-before Phân chia văn bản ngay trước phần tử được áp dụng page-break-after Phân chia văn ...

page-break thực tế nó là thuộc tính của CSS bao gồm một bộ 3 thuộc tính page-break-before, page-break-after and page-break-inside. Nó giúp cho việc định nghĩa các tài liệu trước khi in

Properties

page-break-before Phân chia văn bản ngay trước phần tử được áp dụng page-break-after Phân chia văn bản ngay sau phần tử được áp dụng page-break-inside Phân chia văn bản ngay bên trong phần tử được áp dụng

Syntax

page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid 

Giá trị left hoặc right cho page-break-before và page-break-after liên quan đến cách bố trí trải rộng phân biện trái phải always là sự kết hợp của cả 2

Example

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

Giải thích đoạn mã trên

  • một trang sẽ phị phân chia phía trước phần tử h2 (Có thể hiểu với thể h2 trong tài liệu đều tách ra một trang mới với thẻ h2 đầu trang)
  • Nó sẽ ngăn chặn phân tách page ngay sau các thành phần h3 , h4 ( Có thể hiểu các thẻ tiêu để h3, h4 sẽ đi cùng với nội dung khác việc làm này để tránh cho các phần tử bị lẻ khi in )
  • Ngăn chặn phân tách trang bên trong các thẻ pre, blockquote khi in

Related properties

  • @page
  • break-after
  • break-before

0