css 打印分页_使用CSS3分页符组织打印页面

HTML5 / CSS3教程

HTML5 / CSS3教程

本文是我们的HTML5 / CSS3教程系列的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

尽管我们目前正处于一个数字时代，在这里可以轻松访问所有内容，但仍有许多人仍然喜欢在纸上阅读长篇文章。 您的许多用户都有可能打印出您的内容以离线阅读。

样式或内容从网络到打印的移植能力已经存在了多年。 我们可以使用样式表中的@media规则来执行此操作，如下所示：

@media print {
	/* Style rules */
}

有一些属性可以让我们在移植到打印时格式化Web内容，我们将讨论其中之一： Page Break 。

它能做什么？

如果您一直在使用Microsoft Word和Pages等文字处理器，则应该熟悉分页符菜单； 这使您可以将内容拆分到下一页。

这个模块做到了； 允许您控制如何逐页拆分您的Web内容。

使用分页符

出于演示目的，我创建了一个要打印的虚拟页面。 在这里，我发现了一个非战略性的突破，如下所示。

如果标题和该孤儿从下一页开始看起来会更好。

为此，我们可以使用page-break-after属性并将值设置为always以强制以下元素“中断”到下一页。

.page-break {
	page-break-after: always;
}

然后，您可以使用在元素之间的类来创建新元素，或者像这样在前面的元素中分配类。

<p class="page-break">With the <strong>Eraser</strong> feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t. </p>

<h3>The phone to  travel With</h3>
<p><strong>S Translator </strong>is going to be a great tool for your travels as ... </p>

现在，您应该在接下来的页面中找到标题和孤儿。

寡妇和孤儿

如果内容量很大，上述方法可能很乏味。 因此，与其强迫内容破坏，不如设置寡妇和孤儿的最小阈值 。

在排版中，寡妇和孤儿是不幸的名字，用来指代另一页上其余段落似乎遗弃的遗留单词或短线。

通过使用orphans and widows属性，我们可以指定阈值。 给定以下代码示例，我们可以指定在发生分页符的段落的底部或开头至少保留三行。

p {
	orphans: 3;
	widows: 3;
}

更多资源

我们已经讨论了控制用于Web内容的打印介质中的分页符的基本方法，并且希望这鼓励您考虑网站中的打印样式，以便您的内容在屏幕和纸张上都看起来不错。

有关更多信息，请转到以下参考。

• CSS分页媒体模块级别3 — W3C

翻译自: https://www.hongkiat.com/blog/css3-page-break/