CSS page-break-before là một thuộc tính CSS được sử dụng để chèn ngắt trang trước phần tử được chỉ định khi in tài liệu. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về thuộc tính này, cách sử dụng và ưu nhược điểm của nó.
Tổng quan CSS page-break-before property là gì
Thuộc tính CSS page-break-before cho biết rằng có hay không cho phép ngắt trang trước hộp của phần tử. Điều này giúp xác định hành vi của tài liệu khi được in ra. Bao gồm các thuộc tính page-break-after và page-break-inside, các thuộc tính này giúp xác định hành vi của tài liệu khi được in ra.
Tuy nhiên, bạn không thể sử dụng thuộc tính này trên các phần tử được định vị tuyệt đối hoặc một phần tử <div> trống không tạo ra một hộp.
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.
Ai sẽ dùng CSS page-break-before property
Người dùng CSS page-break-before property là các nhà thiết kế web, các nhà phát triển web và các nhà xuất bản nội dung.
Hướng dẫn CSS page-break-before property
Cú pháp của thuộc tính này như sau:
page-break-before: auto|always|avoid|left|right|initial|inherit;Các giá trị có thể của thuộc tính này được mô tả như sau:
Giá trị auto
Đây là giá trị mặc định của thuộc tính. Nó chèn ngắt trang tự động trước phần tử nếu cần.
Giá trị always
Giá trị này luôn luôn buộc phải chèn ngắt trang trước phần tử đã chỉ định.
Giá trị avoid
Giá trị này được sử dụng để tránh ngắt trang trước phần tử bất kỳ khi có thể.
Giá trị left
Giá trị này buộc phải chèn một hoặc hai ngắt trang trước phần tử để trang tiếp theo được hiển thị như là trang bên trái.
Giá trị right
Giá trị này buộc phải chèn một hoặc hai ngắt trang trước phần tử để trang tiếp theo được hiển thị như là trang bên phải.
Giá trị initial
Giá trị này thiết lập thuộc tính về giá trị mặc định.
Giá trị inherit
Nếu giá trị này được chỉ định, phần tử tương ứng sẽ sử dụng giá trị được tính toán của thuộc tính cha của nó.
Ví dụ CSS page-break-before property
Dưới đây là một số ví dụ sử dụng thuộc tính CSS page-break-before property:
- Để buộc một trang mới bắt đầu trước một đoạn văn bản:
<style>
p {
page-break-before: always;
}
</style>
<p>Đoạn văn bản này sẽ bắt đầu trên một trang mới.</p>Ví dụ này sẽ buộc một trang mới bắt đầu trước đoạn văn bản. Điều này có thể hữu ích nếu bạn muốn đảm bảo rằng một đoạn văn bản nhất định sẽ xuất hiện trên một trang mới, chẳng hạn như một tiêu đề chính hoặc một phần quan trọng của văn bản.
- Để tránh một trang mới bắt đầu trước một đoạn văn bản:
<style>
p {
page-break-before: avoid;
}
</style>
<p>Đoạn văn bản này sẽ không bắt đầu trên một trang mới.</p>Ví dụ này sẽ tránh một trang mới bắt đầu trước đoạn văn bản. Điều này có thể hữu ích nếu bạn muốn đảm bảo rằng một đoạn văn bản nhất định sẽ xuất hiện trên cùng một trang với đoạn văn bản trước đó.
- Để cho phép trình duyệt quyết định xem có bắt đầu một trang mới trước một đoạn văn bản hay không
<style>
p {
page-break-before: auto;
}
</style>
<p>Đoạn văn bản này có thể bắt đầu trên một trang mới hoặc không.</p>Ví dụ này sẽ cho phép trình duyệt quyết định xem có bắt đầu một trang mới trước đoạn văn bản hay không. Điều này có thể hữu ích nếu bạn muốn cho trình duyệt quyết định cách tốt nhất để chia trang.
- Để chỉ định một mặt cụ thể của trang để bắt đầu trước một đoạn văn bản:
<style>
p {
page-break-before: left;
}
</style>
<p>Đoạn văn bản này sẽ bắt đầu trên một trang mới, ở phía bên trái của trang.</p>Ví dụ này sẽ buộc một trang mới bắt đầu trước đoạn văn bản, ở phía bên trái của trang. Điều này có thể hữu ích nếu bạn muốn đảm bảo rằng một đoạn văn bản nhất định sẽ xuất hiện ở đầu một trang cụ thể.
- Để chỉ định một mặt cụ thể của trang để tránh bắt đầu trước một đoạn văn bản
<style>
p {
page-break-before: right;
}
</style>
<p>Đoạn văn bản này sẽ không bắt đầu trên một trang mới, ở phía bên phải của trang.</p>Ví dụ này sẽ tránh một trang mới bắt đầu trước đoạn văn bản, ở phía bên phải của trang. Điều này có thể hữu ích nếu bạn muốn đảm bảo rằng một đoạn văn bản nhất định sẽ xuất hiện ở cuối một trang cụ thể.
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 các trang được chia trong tài liệu của mình.
Ưu và Nhược điểm CSS page-break-before property Ưu điểm
- Giúp xác định hành vi của tài liệu khi được in ra.
Nhược điểm
- Không thể sử dụng trên các phần tử được định vị tuyệt đối hoặc một phần tử <div> trống không tạo ra một hộp.
Tổng kết
Trong bài viết này, chúng ta đã tìm hiểu về thuộc tính CSS page-break-before và cách sử dụng nó để chèn ngắt trang vào các phần tử trên trang web. Chúng ta đã tìm hiểu các giá trị có thể được sử dụng cho thuộc tính này và xem qua các ví dụ để hiểu rõ hơn về cách nó hoạt động.
Nếu bạn đang thiết kế trang web để in hoặc muốn kiểm soát cách tài liệu của bạn được hiển thị khi in ra, thuộc tính CSS page-break-before là một công cụ quan trọng để có trong tay của bạn.