Как избежать разрыва страницы сразу после заголовка - PullRequest
Новая
       6

Как избежать разрыва страницы сразу после заголовка

18 голосов
/ 11 февраля 2012

У меня есть документ HTML 4.01 / CSS 2.1, который включает заголовок H3, за которым следует короткий (в одну строку) блок абзаца, а затем неупорядоченный список из нескольких элементов: 

<h3>Heading!</h3>

<p>Some things:</p>

<ul>
  <li>Thing one</li>
  <li>Thing B</li>
  <li>Thing 4</li>
</ul>

Моя проблема в том, что когдаЯ печатаю документ (или отображаю его как PDF, используя wkhtmltopdf), иногда разрыв страницы происходит сразу после заголовка, перед абзацем, что выглядит довольно глупо.

Есть ли способ оговорить, чторазрывов страниц следует избегать сразу после заголовка?(Я не против решений HTML5 / CSS3, если это значительно упрощает ситуацию.)

Примечание: Следуя советам, я попытался использовать свойство CSS page-break-after: avoid.Однако это не работает ни в одном браузере на базе WebKit или Mozilla .

Ответы [ 2 ]

16 голосов
/ 11 февраля 2012

Поскольку свойство CSS page-break-after: avoid не работает ни в одном браузере на основе WebKit или Mozilla , используйте page-break-inside: avoid над заголовком и приемлемым количеством текста:

CSS 

<style type="text/css">
    .nobreak {
        page-break-inside: avoid;
    }
</style>

HTML 

<div class="nobreak">
    <h3>Heading!</h3>

    <p>Some things:</p>

</div>

    <ul>
      <li>Thing one</li>
      <li>Thing B</li>
      <li>Thing 4</li>
    </ul>
12 голосов
/ 12 декабря 2018

Это чрезвычайно хакерское решение, но оно работает для меня: 

h1 {
    page-break-inside: avoid;
}
h1::after {
    content: "";
    display: block;
    height: 100px;
    margin-bottom: -100px;
}

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

...