css 打印分页_高级CSS打印-使用CSS分页符

css 打印分页

I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen -- he tells his employees to print the website for him to look at. And since he looks at pages that way, he believes most of his customers do just this.

我有一位客户绝对坚持他的网页可以完美打印。 为什么？ 因为他拒绝查看屏幕上的页面-他告诉他的员工打印网站以供他查看。 由于他以这种方式查看网页，因此他相信大多数客户都这样做。

Needless to say, I've learned quite a few tricks to making a website print properly. I've already shared methods for making your website content printer-friendly, as well as making your website structure printer-friendly. One important aspect of making your pages printer-friendly is by using CSS/XHTML page breaks.

不用说，我已经学到了很多使网站正确打印的技巧。 我已经分享了使您的网站内容易于打印以及使网站结构易于打印的方法 。 使页面易于打印的一个重要方面是使用CSS / XHTML分页符。

There are numerous spots that are good for page breaks:

分页符有很多优点：

• Between page sections (h2 or h3 tags, depending on your site format)
  页面部分之间(h2或h3标签，取决于您的网站格式)
• Between the end of an article and subsequent comments / trackbacks
  在文章结尾与后续评论/引用之间
• Between longs blocks of content
  在多头内容之间

Luckily, using page breaks in CSS is quite easy.

幸运的是，在CSS中使用分页符非常容易。

CSS (The CSS)

The all and print medias should be addressed:

all和print媒体应处理：

@media all {
	.page-break	{ display: none; }
}

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

The first declaration ensures that the page-break is never seen visually...while the second ensures that the page break is seen by the printer.

第一个声明可确保从视觉上看不到分页符...而第二个声明可确保打印机可以看到分页符。

HTML (The HTML)

Creating a simple DIV element with the page-break class is how you implement the page break.

使用page-break类创建一个简单的DIV元素是实现分页符的方式。

<div class="page-break"></div>

Quite simple, huh?

很简单，对吧？

用法 (The Usage)

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->

There you have it. The importance of page breaks in the web should not be understated, as many users still print content regularly. Also note that your content may be printed into PDF format and shared.

你有它。 网络中分页符的重要性不容小under，因为许多用户仍在定期打印内容。 另请注意，您的内容可能会打印为PDF格式并共享。

翻译自: https://davidwalsh.name/css-page-breaks

css 打印分页