【CSS】打印相关属性介绍

自动分页

如下一段简单的 HTML 代码:

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background: antiquewhite;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background: aquamarine;
    }
</style>
<div class="box1">1</div>
<div class="box2">2</div>

在浏览器上打印网页，可以看到 box1 和 box2 都在同一页。

注意: 打印预览没有显示背景颜色，原因是浏览器默认隐藏了打印的背景颜色，在 More settings 中勾选 Background graphics 就可以看到背景颜色了(见下图红色箭头)。

通过添加 css 属性，在打印时可以自动分页。

给 .box1 添加 break-after: page;，含义是在 box1 后面添加分页；
给 .box2 添加 break-before: page;，含义是在 box2 前面添加分页；
使用其中任一方式都可以在打印时自动分页，如下示例在 box2 前面添加分页。

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background: antiquewhite;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background: aquamarine;
        break-before: page;
    }
</style>
<div class="box1">1</div>
<div class="box2">2</div>

在浏览器上打印网页，可以看到 box2 自动换到下一页。

与 break-before 和 break-after 相关的还有一个属性叫做 break-inside，含义是元素内部尽可能的不分页，比如一些表格或者图片尽可能在同一个页面内显示。

如下代码: 将 box2 高度设置为 100vh，box2 高度刚好和页面高度一致。

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background: antiquewhite;
    }

    .box2 {
        width: 200px;
        height: 100vh;
        background: aquamarine;
    }
</style>
<div class="box1">1</div>
<div class="box2">2</div>

第一页显示了 box1 后是不够空间放满 box2 的，因此 box2 有一部分会显示在第二页。

如下代码: 给 box2 添加 break-inside: avoid-page;，让 box2 尽可能的不分页。

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background: antiquewhite;
    }

    .box2 {
        width: 200px;
        height: 100vh;
        background: aquamarine;
        break-inside: avoid-page;
    }
</style>
<div class="box1">1</div>
<div class="box2">2</div>

可以看到 box2 直接全部都跑去第二页了，这样保证了整体的完整性，对于图片，表格等场景非常实用。

如下示例: box2 的高度设置为 120vh，超过了页面高度，即便设置了 break-inside: avoid-page; 也还是会分页。

日常开发可能还会看到 page-xxx 开头的打印属性，这些是比较旧的属性，功能和上面介绍的三个属性是一样的，日常开发尽量使用新的打印属性。

• page-break-before: always;(旧), break-before: page;(新): 在元素前面添加分页；
• page-break-after: always;(旧), break-after: page;(新): 在元素后面添加分页；
• page-break-inside: avoid;(旧), break-inside: avoid-page;(新): 元素内部尽可能不分页；

@page [<页面选择器>] {
  /* 页面属性声明 */
}

@page cover { size: A4 landscape; margin: 0; }

.cover-page { page: cover; } /* 通过 page 属性应用命名页面 */

@page content { size: A4 landscape; margin: 20px; }

.content-page { page: content; } /* 通过 page 属性应用命名页面 */

@media print {}

.box2 {
    width: 200px;
    height: 200px;
    background: aquamarine;
    break-before: page;
}

.box2 {
    width: 200px;
    height: 200px;
    background: aquamarine;
   
}

@media print {
    .box2 {
        break-before: page;
    }
}

@media print {
    .navbar, .sidebar, .ad-banner, .no-print {
        display: none !important;
    }
}