执行 CSS 以避免分页符的正确方法是什么？答案

【问题标题】：What is the correct way to do the CSS to avoid page breaks?执行 CSS 以避免分页符的正确方法是什么？
【发布时间】：2015-09-28 15:34:21
【问题描述】：

我正在尝试使用 wkhtmltopdf 将此页面变成（有点）好看的 PDF 文档：

http://z2codes.franklinlegal.net/franklin/DocViewer.jsp?showset=lubbockset&z2collection=lubbock&docid=405#405

到目前为止，我正在使用以下代码：

a[name^="0"] p, a[name^="1"] p, a[name^="2"] p, a[name^="3"] p, a[name^="4"] p, a[name^="5"] p, a[name^="6"] p, a[name^="7"] p, a[name^="8"] p, a[name^="9"] p {
  display: block;
  page-break-inside: avoid;
}

a[name^="0"], a[name^="1"], a[name^="2"], a[name^="3"], a[name^="4"], a[name^="5"], a[name^="6"], a[name^="7"], a[name^="8"], a[name^="9"] {
  display: block;
  page-break-inside: avoid;
}

h5.Heading4:not(:first-child) {
  page-break-before: always;
}

img {
  visible: hidden;
}

这基本上是正确的，而且我得到的结果比一开始更好。但是分页符仍然不完全正确。问题树是这样的

<a>
    <div>Section Header</div>
    <p>some big paragraph of crappy city ordinances</p>
</a>

现在，我有了 CSS，它可以尽可能避免破坏段落（有几个超过一页的段落，但其余的都很好）。但是，它仍然偶尔会在页面底部放置一个节标题，然后将该段落移动到下一个 — 如果这样做，它也应该随之移动节标题，而不是拆分它们。

这是 CSS3 中可以解决的问题吗？

[编辑]

<A NAME="328" />
    <DIV CLASS='Heading7'><span onClick="top.showBookmarkDialog('328');"><img src="http://z2codes.franklinlegal.net/franklin/worldlink.jpg" border="0"> &nbsp;</span>Sec. 17.&nbsp; &nbsp; &nbsp;Improvements of sidewalks and curbs.</DIV>
    <P><Font Face="Times New Roman">Said City shall have the power to provide for the construction, improvement or repair of any sidewalk or curb by penal ordinance and to declare defective sidewalks or curbs public nuisances.</FONT>
    </P>
</A>

这是请求的，不确定它会有多大帮助。

【问题讨论】：

标签： css wkhtmltopdf page-break page-break-inside

【解决方案1】：

章节标题不在段落内；它在锚里面。在段落中添加page-break-inside: avoid; 只会防止段落内的内容被拆分。它不适用于段落的兄弟。

因此，如果您不希望节标题和段落拆分，则需要将page-break-inside: avoid; 添加到父级（也称为锚点），而不是段落。

a {
  page-break-inside: avoid;
}

【讨论】：

他不是已经用第二个 CSS 选择器 a[name^="0"], a[name^="1"], … { display: block; page-break-inside: avoid; } 做到了这一点吗？
@Xufox 不，因为这些选择器都不匹配他提供的 HTML。见这里：jsfiddle.net/uLz9fby0
我知道，但至少他尝试过。
@Xufox 我不确定你想表达什么观点。阅读他的帖子，他试图通过拆分段落来解决问题。我的回答解释说他需要拆分锚，而不是段落。另外，请不要对帖子进行完全不相关的编辑。将单引号从 ' 更改为 ’ 绝对不会影响帖子的可读性。这是我的答案，不是你的。如果您想使用’，请在您自己的答案中使用。这些变化对任何人都没有帮助。
它们确实与 html 匹配...我提供了一个简化的示例。没有理由让它像我提供的链接一样复杂。我会编辑这个，但我不知道为什么这很重要。我的选择器是正确的。

【解决方案2】：

简化您的 CSS 选择器。您当前的样式不适用于链接块：

p, a {
  display: block;
  page-break-inside: avoid;
}

实际上p 的选择器是多余的，因为它们位于a 标记内。

【讨论】：