What is the correct way to do the CSS to avoid page breaks?

问题

I’m trying to use wkhtmltopdf to turn this page into a (somewhat) nice-looking PDF document:

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

I’m using the following code so far:

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;
}

This mostly correct, and I’m getting better results than at first. But the page breaks are still not all correct. The problem trees look like this

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

Now, I’ve got the CSS where it will avoid breaking a paragraph where possible (there are a few more-than-one-page paragraphs, but the rest are fine). However, it will still occasionally put a section header at the bottom of a page, then move the paragraph to the next — and if it does this, it should also move the section header with it, rather than splitting them.

Is this a solvable problem in CSS3?

[edit]

<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>

This was requested, not sure how helpful it will be.

回答1:

The section header isn't inside the paragraph; it's inside the anchor. Adding page-break-inside: avoid; to the paragraph only prevents the content within the paragraph from being split up. It doesn't apply to siblings of the paragraph.

Therefore, if you don't want the section header and paragraph to split, you need to add page-break-inside: avoid; to the parent (aka, the anchor), not the paragraph.

a {
  page-break-inside: avoid;
}

回答2:

Simplify your CSS selectors. Your current styles do not apply to the link blocks:

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

Actually the selector for p is redundant, as they are inside the a tags.

来源：https://stackoverflow.com/questions/31331383/what-is-the-correct-way-to-do-the-css-to-avoid-page-breaks

标签

css

wkhtmltopdf

page-break

page-break-inside