页面分页（page-break）失效求助：page-break-always完全无作用

嘿，我太懂你这种打印分页样式失效的头疼了——page-break规则有时候就像个不听话的小家伙，尤其是在Bootstrap这类框架的默认样式干扰下，很容易直接“罢工”。咱们一步步排查常见问题，把它搞定：

1. Bootstrap的Flex布局是头号“凶手” #

Bootstrap的.row、.container这类核心容器默认用了display: flex，而分页规则在flex容器里根本不生效！这是很多人踩坑的点。
解决办法：在打印媒体查询里重置这些容器的布局，让它们回到块级模式：

@media print {
  .row, .container {
    display: block !important;
    float: none !important;
    width: auto !important;
  }
}

2. 你的分页规则优先级不够 #

Bootstrap的样式优先级不低，如果你的自定义.page-break-always选择器太宽泛，很容易被覆盖。打开浏览器打印预览的开发者工具（Chrome里按F12后切换到打印预览模式），看看page-break-before是不是被划掉了。
解决办法：要么提高选择器特异性，要么用!important应急（尽量少用，但实在没办法时可以）：

@media print {
  /* 更具体的选择器 */
  body .content-section .page-break-always {
    page-break-before: always;
    display: block;
    clear: both;
  }
  /* 或者应急用!important */
  .page-break-always {
    page-break-before: always !important;
  }
}

3. 父元素的overflow属性在搞鬼 #

如果分页元素的父容器设置了overflow: hidden或overflow: auto，浏览器会把这个容器当成独立的渲染块，分页规则会被忽略。
解决办法：在打印样式里重置父元素的overflow：

@media print {
  .your-parent-container {
    overflow: visible !important;
  }
}

4. 确保分页元素是块级元素 #

page-break只对块级元素生效！如果你的.page-break-always是行内/行内块元素，肯定没用。给它加上块级声明：

.page-break-always {
  display: block;
  height: 0; /* 避免占用额外页面空间 */
  margin: 0;
  padding: 0;
  visibility: hidden; /* 隐藏元素但保留分页位置 */
}

5. 浏览器打印设置的小细节 #

有些浏览器（比如Chrome）的打印默认设置会影响分页：

• 勾选“背景图形”选项（不然部分样式可能不生效）
• 把缩放调整为“实际大小”，避免内容被压缩导致分页失效

最后再提个小提醒：一定要用浏览器的打印预览（Ctrl+P）测试，分页规则只在打印上下文里生效，普通页面视图是看不到效果的！

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