css - CSS 避免分页的正确方法是什么？

Question

我正在尝试使用 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>

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

Answer 1

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

因此，如果您不希望节标题和段落拆分，则需要将 page-break-inside: avoid; 添加到父级(又名 anchor )，而不是段。

a {
  page-break-inside: avoid;
}