det*_*tly 25 html css page-break
我有一个HTML 4.01/CSS 2.1文档,其中包含一个H3标题,后跟一个短(一行)段落块,然后是一个包含多个项目的无序列表:
<h3>Heading!</h3>
<p>Some things:</p>
<ul>
<li>Thing one</li>
<li>Thing B</li>
<li>Thing 4</li>
</ul>
我的问题是,当我打印文档(或使用PDF渲染它wkhtmltopdf)时,有时会在标题之后,在段落之前发生分页,这看起来很傻.
有没有办法规定在标题后应立即避免分页？(我不反对HTML5/CSS3解决方案,如果这大大简化了事情.)
注意:以下建议,我尝试使用CSS属性page-break-after: avoid.但是,这在任何基于WebKit或Mozilla的浏览器中都不起作用.
Zen*_*rbi 26
这是一个非常棘手的解决方案，但对我有用：
h1 {
page-break-inside: avoid;
}
h1::after {
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
}
基本上，我创建了一个不可见的元素，该元素会增加的大小，<h1>而不影响其后的内容。当page-break-inside: avoid应用且整个页面<h1>（包括hacky元素无法放入页面）时，浏览器被强制将其<h1>带到下一页。
Jas*_*son 17
由于CSS属性page-break-after: avoid在任何基于WebKit或Mozilla的浏览器中都不起作用,因此请使用page-break-inside: avoid标题和可接受的文本量:
<style type="text/css">
.nobreak {
page-break-inside: avoid;
}
</style>
<div class="nobreak">
<h3>Heading!</h3>
<p>Some things:</p>
</div>
<ul>
<li>Thing one</li>
<li>Thing B</li>
<li>Thing 4</li>
</ul>
如果您使用 HTML 5<article>和<header>，这里有一个似乎适用于 Webkit、Blink 和 Gecko 的 hack（调整值8rem以满足您的需求）：
article > header::before
{
content: "";
display: block;
height: 8rem; /* pretend that the header is at least 8rem high so this header cannot fit near the end of page */
margin-bottom: -8rem; /* however, reduce the margin the same amount so that the following content can stay in its usual place */
page-break-inside: avoid;
break-inside: avoid;
}
这是可行的，因为伪元素是从标题顶部::before向下呈现的，并且浏览器确实支持得足够好，可以实际保留页面末尾的空间。它还利用了这样一个事实：在实际测量所需空间时，浏览器会考虑无边距。我不知道这是否在任何规范中指定，或者恰好符合现实世界的浏览器行为。page-break-inside: avoid;height
其他一些答案建议改为使用，::after但根据我的经验，这可能会导致容器元素<article>开始在上一页上呈现。使用::before似乎效果更好，并且容器元素的开头似乎也移动了。显然，如果您的包含元素没有可见边缘，则差异并不重要。
请注意，因为您只有一个伪元素，::before所以如果您想为::before. 此黑客要求::before在其他内容下呈现但透明，因此它不能包含可见内容。
需要考虑的其他事项：
page-break，nor也不能工作。目前尚不清楚这是由部分浏览器实现引起的还是由于 CSS 规范实际需要这样做所致。在实践中，您需要使用最多的所有父元素，否则分页符将在任何地方发生。page-break-insidedisplay:tabledisplay:griddisplay:flexdisplay:block<html><article>上面示例中的整体小于8rem高，该元素仍然会跳到下一页，因为这种黑客8rem甚至在尝试适应<article>页面之前就盲目地保留了空间。然而，实际上，这比break-after:avoid现实page-break-after:avoid世界的浏览器支持更好。widows另外，对和 的支持orphans确实很差，因此您可能<p>也想对 element 应用类似的 hack。我会建议2rem或3rem为这些空间。