关于 CSS 打印你应该知道的样式配置

CSS 打印分页功能

需求： html 在一个区域显示数据，当放不下时，自动第二页存放，打印

你可以使用 CSS 的分页属性来实现这个功能。CSS 分页属性包括 page-break-before、page-break-after 和 page-break-inside，它们可以控制在哪里分页。

主要是这几个配置样式属性：

1.分页符： 使用 page-break-before 和 page-break-after 属性来在指定元素之前或之后插入分页符。

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

2.避免分割元素：使用 page-break-inside 属性来避免将元素分割到不同的页面上。 【放在要分割的元素上】

@media print {.avoid-break {page-break-inside: avoid;}
}

3.控制分页位置：使用 page-break-before 和 page-break-after 属性的值来控制分页的位置，如 auto、always、avoid 等。

@media print {.custom-break {page-break-before: auto; /* 默认值，根据需要调整 */page-break-after: always;}
}

具体来说，你可以将要显示的数据放在一个容器元素中，并为该元素设置 page-break-inside: avoid; 属性，表示不允许在其中间分页。然后，为容器元素的父元素设置 page-break-after: always; 属性，表示在该元素之后始终分页。

<style>.container {page-break-inside: avoid;}.page {page-break-after: always;}
</style><div class="page"><div class="container"><!-- 这里放要显示的数据 --></div>
</div>

在这个例子中，我们定义了一个名为 container 的容器元素，并为其设置了 page-break-inside: avoid; 属性，表示不允许在其中间分页。然后，我们定义了一个名为 page 的父元素，并为其设置了 page-break-after: always; 属性，表示在该元素之后始终分页。

当数据超出一页时，浏览器 会自动将剩余部分放到下一页。如果你需要打印这些数据，只需将页面设置为打印模式即可。在打印预览中，你可以看到所有的数据被正确地分页，并且可以跨页打印。

CSS 实现打印 Table 单元格换行显示

white-space: normal;：默认值，文本在遇到空格或换行符时换行，单词内部不会强制分割。
word-break: break-all;：单词会被强制分割，即使在单词内部也会进行换行。

line-height: 指定行高来确定分割后的间隙

table tr td:nth-child(1) {width: 80px; //指定单元格宽度word-break: break-all;white-space: normal;line-height: 1.2; 
}

CSS 打印常用配置

1.隐藏不必要的元素：通过设置 display: none; 可以隐藏在打印版本中不需要显示的元素，例如导航栏 、广告等

@media print {.navbar, .ad-banner {display: none;}
}

2.调整字体大小和颜色：可以根据打印需求调整文本的字体大小和颜色。

@media print {body {font-size: 12pt;color: #000;}
}

3.设置页面边距：通过设置 margin 属性来调整打印页面的边距.

@media print {@page {margin: 1cm;}
}

4.隐藏背景图像和颜色：可以通过设置 background 属性为 none 来隐藏打印页面的背景图像和颜色。

@media print {body {background: none;}
}

5.设置页面大小：通过 @page 规则和 size 属性来定义打印页面的大小。

@media print {@page {size: A4; /* 可以使用常见的纸张尺寸如 A4、Letter、Legal 等 */}
}

6.调整图片显示：可以通过设置 max-width 属性来控制打印版本中图片的最大宽度，避免图片溢出页面边界

@media print {img {max-width: 100%;height: auto;}
}

7. 隐藏链接的 URL：如果你不希望在打印版本中显示链接的 URL，可以使用 text-decoration 属性来隐藏。

@media print {a::after {content: none;}
}

8.调整页眉和页脚：

可以使用 @top-left, @top-center, @top-right, @bottom-left, @bottom-center, @bottom-right 等伪元素选择器来定义页眉和页脚的内容和样式。

@media print {@page {@top-left {content: "页眉内容";}@bottom-center {content: "页脚内容";}}
}