CSS打印page-break-after仅首页生效 条码标签分页打印问题排查

page-break-after: always仅第一页生效是三个核心问题导致的：

• 浏览器对Grid/Flex布局容器内的分页CSS属性支持存在已知bug，你给body设置了display: grid，容器内子元素的分页规则会被直接忽略，这是分页失效的最主要原因
• 你把分页触发元素.row-footer嵌套在了循环生成的.rack-label内部，分页属性作用在嵌套子元素上时，会被父元素的布局规则拦截，无法触发全局分页
• 属性写法和兼容性不足：你当前写的是page-break-before: always，和你需要的「每12个元素后分页」的逻辑不符，同时缺少现代浏览器需要的新标准break-after属性，部分webkit内核浏览器不会识别旧属性

不需要用A4页面凑半页内容的迂回方案，直接按A5尺寸配置，按下面步骤修改即可：

1. 替换打印样式代码 #

把原有@media print下的代码全部替换为下面的内容，用兼容性更好的浮动实现3列布局，避免Grid布局破坏分页规则：

@media print {
  @page {
    size: A5;
    margin: 3mm;
  }
  html, body {
    margin: 0;
    padding: 0;
    width: 148mm; /* A5标准宽度 */
  }
  .rack-label {
    float: left;
    width: calc(148mm / 3 - 2mm); /* 3列均分宽度，预留2mm装订/裁切间距 */
    height: calc(210mm / 4 - 2mm); /* A5标准高度210mm，均分4行 */
    margin: 1mm;
    box-sizing: border-box;
    page-break-inside: avoid; /* 单个条码不会被拆分到两页 */
  }
  .row-footer {
    clear: both; /* 清除前面3列元素的浮动 */
    width: 100%;
    height: 0;
    visibility: hidden;
    /* 全兼容分页属性，强制触发分页 */
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid;
  }
}

2. 调整Angular模板结构 #

把分页元素.row-footer从.rack-label内部移出来，保证它和条码元素是同级兄弟节点，避免嵌套导致分页失效：

<ng-container *ngFor="let product of productsToPrint; let indexOfElement = index">
  <div class="rack-label">
    <!-- 条码展示内容放在这里 -->
  </div>
  <!-- 每凑够12个条码（3列*4行=12），插入分页触发元素 -->
  <div *ngIf="(indexOfElement + 1) % 12 == 0" class="row-footer"></div>
</ng-container>

3. 避坑提示 #

• 打印场景下不要给外层容器使用display: grid/display: flex，目前Chrome、Edge、Safari对这两种布局内的分页属性支持都不完整，浮动布局是打印多列场景下兼容性最高的方案
• 不要在@page规则里写border、background这类属性，大部分浏览器默认不会打印这些属性，写了也不会生效
• 如果出现个别元素错位，检查条码元素是否设置了position: absolute、overflow: hidden属性，这类属性也会干扰分页规则的正常触发

内容的提问来源于stack exchange，提问作者Stenquery