如何避免打印时卡片被拆分到多个页面

针对打印时卡片被拆分到第二页的问题，你可以通过以下几种CSS打印样式调整来解决：

• 禁止卡片内部分页：给卡片元素添加现代浏览器支持的break-inside: avoid;，同时兼容旧版浏览器加上page-break-inside: avoid;：

  .card {
    page-break-inside: avoid; /* 适配旧版浏览器 */
    break-inside: avoid; /* 现代浏览器标准属性 */
  }
  

• 自定义打印页边距：如果卡片刚好卡在页边被拆分，可调整打印时的页面边距，避免内容挤压：

  @media print {
    body {
      margin: 1cm; /* 根据纸张大小和需求调整上下左右边距 */
    }
  }
  

• 给卡片添加分页前间距：在可能跨页的卡片前设置足够的外边距，让卡片整体移至下一页：

  @media print {
    .card {
      margin-top: 15px; /* 可根据实际排版调整数值 */
    }
  }
  

• 限制卡片最大高度：根据打印纸张的可用高度，设置卡片最大高度，避免超出单页范围：

  @media print {
    .card {
      max-height: 27cm; /* 以A4纸为例，减去上下边距后的大致可用高度，可按需调整 */
      overflow: hidden; /* 避免卡片内容溢出导致跨页 */
    }
  }
  

调整后建议用浏览器打印预览（Ctrl+P）实时查看效果，根据实际排版微调样式参数即可。

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