CSS page-break-before property sử dụng như thế nào ?

CSS Page-Break-Before Property là một thuộc tính của CSS được sử dụng để thêm ngắt trang trước phần tử khi in tài liệu. Nó chèn ngắt trang trước phần tử được chỉ định trong quá trình in tài liệu. Chúng ta không thể sử dụng thuộc tính này trên các phần tử vị trí tuyệt đối hoặc một phần tử <div> trống không tạo ra một hộp.

Thuộc tính này đại diện cho việc có hoặc không có phép ngắt trang trước hộp phần tử. Bao gồm page-break-before, các thuộc tính CSS page-break-after và page-break-inside giúp chúng ta xác định hành vi của tài liệu khi in.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Page-Break-Before Property

CSS Page-Break-Before Property được sử dụng để kiểm soát cách tài liệu được phân trang trong quá trình in. Khi chúng ta muốn ngắt trang trước một phần tử, chúng ta có thể sử dụng thuộc tính page-break-before. Thuộc tính này có thể được áp dụng cho các phần tử như đoạn văn bản, hình ảnh, bảng và nhiều phần tử khác.

Với CSS Page-Break-Before Property, chúng ta có thể kiểm soát cách tài liệu của mình phân trang khi được in. Chúng ta có thể sử dụng thuộc tính này để đảm bảo rằng các phần tử quan trọng của tài liệu được hiển thị đầy đủ trên một trang.

Ai sẽ dùng CSS Page-Break-Before Property?

CSS Page-Break-Before Property là một trong những thuộc tính quan trọng của CSS được sử dụng bởi những người thiết kế web và những người quản lý tài liệu in ấn. Nó được sử dụng để xác định cách tài liệu của họ sẽ được phân trang khi in.

Những người sử dụng CSS Page-Break-Before Property bao gồm:

• Nhà thiết kế web: Khi thiết kế trang web, nhà thiết kế web có thể sử dụng thuộc tính này để kiểm soát nội dung trên các trang in ấn của trang web của họ.
• Nhà xuất bản: Những người làm việc trong ngành xuất bản sử dụng thuộc tính này để kiểm soát cách sách hoặc báo được phân trang khi in.
• Các nhà quản lý tài liệu in ấn: Những người quản lý tài liệu in ấn sử dụng thuộc tính này để đảm bảo rằng tài liệu của họ được in và hiển thị một cách chính xác.

Hướng dẫn CSS Page-Break-Before Property

Để sử dụng CSS Page-Break-Before Property, chúng ta cần biết cú pháp và các giá trị có thể sử dụng.

Cú pháp:

page-break-before: auto|always|avoid|left|right|initial|inherit;

Các giá trị có thể sử dụng:

• auto: Giá trị mặc định, nó tự động chèn ngắt trang trước phần tử khi cần thiết.
• always: Luôn chèn ngắt trang trước phần tử được chỉ định.
• avoid: Nếu có thể, không chèn ngắt trang trước phần tử.
• left: Chèn một hoặc hai ngắt trang để định dạng của trang tiếp theo giống như trang bên trái.
• right: Chèn một hoặc hai ngắt trang để định dạng của trang tiếp theo giống như trang bên phải.
• initial: Đặt thuộc tính về giá trị mặc định.
• inherit: Nếu chỉ định giá trị này, phần tử tương ứng sẽ kế thừa giá trị đã tính toán của thuộc tính page-break-before của phần tử cha.

Dưới đây là một số ví dụ sử dụng thuộc tính CSS Page-Break-Before Property:

Để đảm bảo một phần văn bản luôn xuất hiện trên trang mới khi in:

p {
  page-break-before: always;
}

Để ngăn không cho một phần văn bản bị chia cắt giữa các trang:

h1 {
  page-break-before: avoid;
}

Để đảm bảo rằng một phần văn bản luôn xuất hiện trên trang trái khi in:

div {
  page-break-before: left;
}

Để đảm bảo rằng một phần văn bản luôn xuất hiện trên trang phải khi in:

div {
  page-break-before: right;
}

Tùy thuộc vào nhu cầu của bạn, bạn có thể sử dụng thuộc tính CSS Page-Break-Before Property để kiểm soát cách thức trình duyệt in một tài liệu.

Ưu và Nhược điểm của CSS Page-Break-Before Property

Ưu điểm:

• Kiểm soát được cách tài liệu được phân trang khi in.
• Dễ dàng sử dụng và áp dụng cho các phần tử trên trang web hoặc tài liệu in ấn.
• Có nhiều giá trị để lựa chọn để đảm bảo rằng tài liệu hiển thị đầy đủ và chính xác.

Nhược điểm:

• Không thể sử dụng trên các phần tử vị trí tuyệt đối hoặc một phần tử <div> trống không tạo ra một hộp.
• Có thể làm thay đổi cách tài liệu hiển thị trên các thiết bị in, ví dụ như máy in khác nhau.

Lời khuyên về CSS Page-Break-Before Property

Khi sử dụng CSS Page-Break-Before Property, chúng ta nên lưu ý một số điểm sau đây:

• Nên kiểm tra xem các phần tử mà bạn muốn ngắt trang có thể sử dụng thuộc tính này hay không.
• Không nên sử dụng quá nhiều thuộc tính này trong tài liệu của mình, vì điều đó có thể làm thay đổi cách tài liệu hiển thị trên các thiết bị in.
• Nếu bạn không chắc chắn về cách sử dụng thuộc tính này, hãy tham khảo tài liệu hướng dẫn hoặc tìm kiếm các tài liệu trực tuyến để biết thêm thông tin.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu về CSS Page-Break-Before Property là gì và cách sử dụng nó để kiểm soát cách tài liệu được phân trang khi in. Chúng ta đã xem xét các giá trị có thể được sử dụng với thuộc tính này, điểm mạnh và yếu của nó, cũng như lời khuyên cho việc sử dụng nó.

Nói chung, CSS Page-Break-Before Property là một công cụ hữu ích để kiểm soát cách tài liệu được phân trang khi in, và nó có thể được sử dụng rộng rãi bởi các nhà thiết kế web, nhà xuất bản và những người quản lý tài liệu in ấn. Tuy nhiên, chúng ta cần lưu ý rằng nó không thể được sử dụng trên một số loại phần tử và có thể làm thay đổi cách tài liệu hiển thị trên các thiết bị in khác nhau.