0

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

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

4

2 回答 2

3

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

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

a {
  page-break-inside: avoid;
}
于 2015-07-10T02:21:16.443 回答
1

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

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

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

于 2015-07-10T02:25:44.577 回答