Каков правильный способ сделать 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

Заголовок раздела не находится внутри абзаца; он находится внутри якоря. Добавление 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 тегов.