将HTML内容划分为固定大小的div

Question

我有一个长滚动的HTML内容，包括文本和图像。 我需要将此内容分成并插入固定大小（A4大小）的div。如何使用javascript或jQuery实现这一点？

<div class="content">
<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>
<div>
<!-- pages should be created in here -->
</div>

Answer 1

不是。 HTML文档不是Microsoft Word文档。 HTML必须适应许多不同平台上的许多不同浏览器。在一天结束时，HTML被设计为流动成一个大的矩形形状，无论它在哪里打开，都可以在屏幕上查看。

您试图在非专为其设计的技术上强制使用打印标准（A4尺寸）。 CSS具有一些添加分页符的功能，但是浏览器是否将它们解释为与文字处理器一样合适也是偶然的。您可以编写世界上所有的Javascript来执行此操作＆＃34;虚拟＆＃34;浏览器＆＃34; A＆＃34;上的分页符，让它看起来和打印完美，并让它在浏览器上完全崩溃＆＃34; B＆＃34;。 HTML并非设计用于一次查看页面。

Answer 2

我一直在寻找解决方案，我找到了w3schools的链接： http://www.w3schools.com/cssref/pr_print_pageba.asp

在这里他们说要使用page-break-after来打破你想要的页面，使用mediaquery打印，例如他们使用页脚来打破页面，但我认为你可以创建一个类并放置它你希望成为页面破坏的类。

示例：

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

然后设置要在内容中断的“断点”类。

希望这会有所帮助：）