Thuộc tính page-break-inside trong CSS

Thuộc tính page-break-inside trong CSS giúp bạn xác định xem có hay không có các Page Break xuất hiện bên trong một Box chứa phần tử.

Giá trị của thuộc tính này không phải là nhân tố duy nhất trong việc xác định có hay không có một Page Break bên trong phần tử. Việc đưa ra quyết định cũng bị tác động bởi giá trị của thuộc tính page-break-before và giá trị của page-break-after.

Thuộc tính page-break-inside có thể nhận giá trị:

avoid: Tránh việc chèn một Page Break vào trong Box chứa phần tử (nếu có thể).
auto: Mặc định. Trình duyệt tự động xử lý Page Break.

Thuộc tính page-break-inside có thể áp dụng cho:

Tất cả phần tử Block Level trong tài liệu.

Quảng cáo

Ví dụ thuộc tính page-break-inside trong CSS

Bạn theo dõi ví dụ sau để thấy cách sử dụng của thuộc tính page-break-inside trong CSS:

<html>
   <head>
   
      <style type="text/css">
         .example {
            -webkit-columns: 150px;
            -moz-columns: 150px;
            columns: 150px;
            -webkit-column-gap: 2em;
            -moz-column-gap: 2em;
            column-gap: 2em;  
         }
         body {
            font-size: 12px;
            font-family: 'Georgia', serif;
            font-weight: 400;
            line-height: 1.45;
            color: #333;
            background: #ecf0f1;
            padding: 1em;
         }
         li {
            background: white;
            padding: 1em;
            margin-bottom: 1.3em;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
         }
      </style>
      
   </head>
   <body>
   
      <ul class="example">
         <li> Su dung CSS giup Webpage cua ban tai nhanh hon.</li>
         <li>Voi CSS, ban khong can phai viet tung thuoc tinh cho tung the HTML moi khi can den.</li>
         <li>CSS giup ban de dang duy tri Webpage hon.</li>
         <li>CSS co nhieu thuoc tinh hon HTML.</li>
         <li>Su dung CSS la phu hop chuan quoc te.</li>
         <li>CSS duoc phat trien vao nam 1994 va duoc duy tri boi mot nhom CSS Working Group.</li> 
         <li>CSS1 duoc cong bo boi W3C nam 1996.</li>
         <li>CSS2 duoc cong bo vao 5/1998.</li>
         <li>CSS3 duoc cong bo vao thang 6/1999.</li>
      </ul> 
      
      <button onclick="myFunction()">In trang</button>
      
      <script>
         function myFunction() {
            window.print();
         }
      </script>
      
   </body>
</html>

Quảng cáo

Kết quả là:

Để tham khảo thêm thông tin về qui tắc @page trong CSS, bạn truy cập chương: Qui tắc @page trong CSS.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: