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

节标题不在段落内;它在锚内。将page-break-inside: avoid;添加到段落中只会阻止段落中的内容被拆分。它不适用于该段的兄弟姐妹。

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

a {
  page-break-inside: avoid;
}

Answer 2

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

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

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

使用CSS以避免分页符的正确方法是什么？

2 个答案: