打印换页 ( break-* )

通常在打印文件时，会根据版面配置适时地将某些段落“分页”，然而对于网页来说往往会忽略打印的分页设置 ( 直接打印网页机会较少 )，但透过 CSS 的打印换页相关样式属性 break-before、break-after、break-inside，就能精准控制元素在换页时要位于哪个页面，这篇教学会介绍这些样式属性用法。

快速导览：

• break-before、break-after 位于前页或后页
• break-inside 是否跨页

break-before、break-after 位于前页或后页

break-before 和 break-after 样式属性可以设定元素在“打印时的位置在前页或后页”，前一页的定义是原本的页面，后页表示会换页到下一页 ( 或下两页 )，这两个样式没有继承特性，主要有下列属性值 ( 目前属性值的表现结果都只有自动分页与强制换页的效果，未来浏览器支援后才可能会有更多打印功能 )：

下方范例打开并打印后，可以自行修改样式属性与属性值，就能看到设定这些属性值的差异 ( 下方范例为 break-after: page; )。

线上展示：https://codepen.io/oxxo/pen/PwYdRKr

<!-- HTML 程式碼 -->
<div>apple</div>
<div>banana</div>
<div class="a">orange</div>
<div>oxxo</div>
<div>papaya</div>
<div>coconut</div>
<div>pear</div>
<div>cucumber</div>

<!-- CSS 程式碼 -->
<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    -webkit-print-color-adjust: exact; /* 列印時會出現背景色 */
    color-adjust: exact;               /* 列印時會出現背景色 */
    box-sizing: border-box;
    border: 5px dashed #a00;
    width: 90%;
    height: 140px;
    font-size: 50px;
    margin: 10px;
  }
  .a {
    background: pink;
    break-after: page;
  }
</style>

break-inside 是否跨页

break-inside 样式属性可以设定元素在自动分页时“是否可以跨页”，如果不能跨页，就会自动分页到下一页 ( 但如果单一元素长度过长在下一页仍然会自动分成两页 )，这个样式没有继承特性，主要有下列属性值：

下方范例打开并打印后，可以自行修改样式属性与属性值，就能看到设定这些属性值的差异 ( 下方范例为 break-inside: avoid; )。

线上展示：https://codepen.io/oxxo/pen/vEBzRaP

<!-- HTML 程式碼 -->
<div>apple</div>
<div>banana</div>
<div class="a">orange</div>
<div>oxxo</div>
<div>papaya</div>
<div>coconut</div>
<div>pear</div>
<div>cucumber</div>

<!-- CSS 程式碼 -->
<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    -webkit-print-color-adjust: exact; /* 列印時會出現背景色 */
    color-adjust: exact;               /* 列印時會出現背景色 */
    box-sizing: border-box;
    border: 5px dashed #a00;
    width: 90%;
    height: 140px;
    font-size: 50px;
    margin: 10px;
  }
  .a {
    background: pink;
    break-inside: avoid;
    height: 1000px;
  }
</style>

小结

CSS 负责控制打印跨页的 break-before、break-after 和 break-inside 的使用频率很低，因打印网页不单纯只有跨页，还有许多眉眉角角的问题需要处理，但如果有打印网页需求，加入这几个样式就让网页排版更佳美观。

意见反馈