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

Я пытаюсь использовать 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>

Это было запрошено, не уверен, насколько это будет полезно.


css page-break page-break-inside wkhtmltopdf
person John O    schedule 10.07.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Заголовок раздела не находится внутри абзаца; это внутри якоря. Добавление page-break-inside: avoid; к абзацу только предотвращает разделение содержимого внутри абзаца. Это не относится к братьям и сестрам абзаца.

Поэтому, если вы не хотите, чтобы заголовок раздела и абзац разделялись, вам нужно добавить page-break-inside: avoid; к родителю (он же якорь), а не к абзацу.

a {
  page-break-inside: avoid;
}
person Christian    schedule 10.07.2015
comment
Разве он уже не сделал это со вторым селектором CSS a[name^="0"], a[name^="1"], … { display: block; page-break-inside: avoid; }? - person Sebastian Simon; 10.07.2015
comment
@Xufox Нет, потому что ни один из этих селекторов не соответствует предоставленному им HTML. См. здесь: jsfiddle.net/uLz9fby0 - person Christian; 10.07.2015
comment
Я знаю, но, по крайней мере, он попытался это сделать. - person Sebastian Simon; 10.07.2015
comment
@Xufox Я не уверен, что вы пытаетесь сделать. Прочтите его пост, он попытался решить проблему, разбив абзац. Мой ответ объясняет, что ему нужно разделить якорь, а не абзац. Также, пожалуйста, воздержитесь от внесения абсолютно неуместных правок в сообщения. Изменение одинарных кавычек с ' на ’ абсолютно не влияет на читабельность сообщения. Это мой ответ, а не ваш. Если вы хотите использовать ’, сделайте это в своих ответах. Такие изменения никому не помогают. - person Christian; 10.07.2015
comment
Они соответствуют html... Я привел упрощенный пример. Не было никакой причины делать это таким же сложным, как источник, который я дал со ссылкой. Хотя я отредактирую это, но я не знаю, почему это должно иметь значение. У меня селекторы правильные. - person John O; 10.07.2015
comment
@JohnO, спасибо за это. Упрощение кода полезно, но вы также должны убедиться, что ключевые части сохранены — в конкретном примере, который вы привели, ваши селекторы CSS не соответствуют чему-либо в HTML. Почему я должен предполагать, что реальный сайт отличается? Вопрос должен быть автономным и воспроизводимым, чтобы помочь другим людям, если ваша структура HTML имеет значение, убедитесь, что вы включили ее в свой вопрос. - person Christian; 10.07.2015

arrow_upward
1
arrow_downward

Упростите свои селекторы CSS. Ваши текущие стили не применяются к блокам ссылок:

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

На самом деле селектор для p избыточен, так как они находятся внутри тегов a.

person Samuel Liew♦    schedule 10.07.2015