Как правильно сделать CSS, чтобы избежать разрывов страниц?

Question

Я пытаюсь использовать wkhtmltopdf, чтобы превратить эту страницу в (несколько) красивый PDF-документ:

http://z2codes.franklinlegal.net/franklin/DocViewer.jsp?showset=lubbockset&z2collection=lubbock&docid=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 теги.