1

Всем привет! Делаю CSS стили для печати. Хочу чтобы заголовок и идущий за ним абзац текста всегда были на одной странице. В CSS прописываю следующие правила:

h2 + p {
  page-break-before: avoid;
}

Через контекстное меню браузера вывожу страницу на печать. Желаемого результата нет. Если места не хватает, заголовок остаётся внизу одной страницы, а текст переносится на другую.

Help!

1 ответ 1

1

Перенос может быть не только между элементами, но и внутри, поэтому стоит добавить запрет переноса в page-break-inside. В принципе можно перестраховаться и добавить ещё запрет переноса после заголовка.

h2 {
  page-break-inside: avoid;
  page-break-after: avoid;
}

h2 + p {
  page-break-before: avoid;
  page-break-inside: avoid;
}

Ну и ещё надо убедиться, что там display: contents не используется - пока тренировался на комментариях ruSO, на эти грабли наступил...

3
  • Не хочет. Попробовал даже применить эти стили на чистый html. Без результата :( Для доп. проверки добавил в h2 + p { color: red }, цвет отработал нормально.
    – Alex
    Commented 14 авг. 2018 в 20:10
  • @Alex, какие значения display у всего? Оно случайно не в таблице находится?
    – Qwertiy
    Commented 14 авг. 2018 в 21:08
  • нет, тестировал просто повторяющиеся "h2" и "p", в body больши ничего. из css тоже ничего кроме кода выше.
    – Alex
    Commented 15 авг. 2018 в 13:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.