在 html/css 中打印标签突然中断

Question

I have a printing page in a website that prints labels for shoes as the picture shows. This had been working for more than 3 years. Two days ago, this broke as shown, the labels or page-break-after stopped working properly.

I looked online but could not know what went wrong.

The correct behaviour is to view each label in a page, so the label printer can print it correctly.

Code: CSS

 h1, h3, h2, h4 { margin-bottom: 1px; } h6 { margin: 0px; direction: ltr; }.col-4, .col-2, .col-8 { padding: 1px; } @page { size: 10cm 5cm; margin: 0.2cm; } img { width: 95%; height: 60px; } p.att-value { font-family: 'Almarai', sans-serif; font-size: larger; margin: 0; padding: 2px; } span.value-block { background-color: black; color: white; padding: 5px; }.a-label { height: 10cm; width: 5cm; padding-top: 5px; padding-right: 30px; margin-bottom: 0.1cm; } @media print{ html, body { width: 10cm; height: 5cm; }.pagebreak { break-inside: avoid; break-after: page; } }

 <div class="a-label"> <div class="row"> <div class="col-12 text-center"> <img src="https://i.stack.imgur.com/FxCHC.png"> <h6>123456</h6> </div> </div> <div class="row"> <div class="col-12"> <h3>Shoe Name</h3> <p class="att-value"> <span class="value-block">Product Name</span> <span class="value-block">Size: 36</span> <span class="att-value"> 250 usd</span> </p> </div> </div> </div> <div class="pagebreak"></div> <div class="a-label"> <div class="row"> <div class="col-12 text-center"> <img src="https://i.stack.imgur.com/FxCHC.png"> <h6>123456</h6> </div> </div> <div class="row"> <div class="col-12"> <h3>Shoe Name 2</h3> <p class="att-value"> <span class="value-block">Product Name</span> <span class="value-block">Size: 36</span> <span class="att-value"> 250 usd</span> </p> </div> </div> </div> <div class="pagebreak"></div>

This feature broke on all browsers

Answer 1

It worked after I updated to the latest bootstrap, specifically version 5. It is unclear to me why it broke suddenly. This feature worked 3 years.

So, the comment from @AndrewMorton was helpful. The credit goes to him.