Orphan CSS: Как избежать заголовков (h1, h2 ...) на нижней странице?

Question

У меня есть большой HTML-документ с заголовками (h1, h2, h3 ...) и параграфы. При печати документа, я хочу, чтобы автоматически, заголовки в нижней части документа, перейдите на следующую страницу:

Как я могу сделать? Я использую «сироты: 3» CSS с параграфами и работает с тегами «p», но с h1 или h2 не работает.

@page { 
    size: A4; 
} 

p { 
    orphans:3; 
} 

h1, h2 { 
    orphans:3 
} 

Full example on action где:

• 1-2 страницы: абзацы сирота отлично работает.
• 2-3 страницы: заголовки не работают.

Требования:

• HTML есть один основной контейнер DIV.
• Не изменяйте HTML.
• Поддержка браузера не имеет значения (на моей конкретной задаче).
• Мне нужен какой-то трюк в CSS (нет JS или JQuery, желательно)
• Я не могу использовать разрыв страницы перед: всегда, потому что я хочу, чтобы эти заголовки переходили только на следующую страницу, когда появляется внизу страницы.

Answer 1

В типографии сирота:

Параграф-открытие линии, которая появляется сама по себе в нижней части страницы или колонки, таким образом, отделенный от остальной части текста.

Однако в HTML <h1> и <p> разные пункты то, что вы должны использовать это break-after свойство сказать макет двигателя, чтобы не поставить разрыв страницы после этого пункта (с побочным эффектом, чтобы перейти в следующий абзац вверх на предыдущую страницу - если подходят - или переместить заголовок на следующую страницу

h1, h2 { 
    break-after: avoid-page; 
} 

Примечания о совместимости: break-after установки является истинным рабочего проекта и даже основные функции не имеет широкую поддержку (нет. в целом Internet Explorer 10 делает). Чтобы обойти это, вы можете использовать еще одно свойство с подобным значением:

h1, h2 { 
    page-break-after: avoid; 
} 

Обратите внимание, что page-break-after относится как к странице и столбцов.page-break-after не очень хорошо поддерживается FF (it is a bug), а затем, если совместимость важна и пункт не будет охватывать через несколько страниц, которые можно обойти оберточной <h1> и <p> внутри контейнера (скажем <section>), а затем применить page-break-inside так:

section { 
    page-break-inside: avoid; 
} 

IMO вы должны комбинировать page-break-after и page-break-inside с использованием page-break-inside с префиксом -moz, пока он не исправит эту ошибку.