Как при печати НЕ делать разрыв страницы на элементе?

Question

[Lorem Ipsum]

Пробовал играться с page-break-inside: avoid; но оно не работает в Chrome.
Пробовал играться с page-break-before и page-break-after, но контент формируется динамически и надо как-то предугадывать где будет разрыв страницы.

Comments

[Евгений]

Почему в хроме не работает? Там полная поддержка. Сам недавно использовал эту функцию

[theuser]

У вас grid используется? Если да, то с ним не работает в хроме page-break-inside, был репорт в багтрекере хромиума.
Еще иногда с flex'ами не всегда срабатывает подобное

[Lorem Ipsum]

theuser, флексы есть, да.

[alex4answ]

Lorem Ipsum, я много чернил на это потрачу..

[javedimka]

Контент, конечно, формируется динамически, но как-то не особо похоже, что от ряда к ряду изменяется высота блоков. Неужели нельзя посчитать сколько блоков уместится на страницу?

[javedimka]

Lorem Ipsum, Неужели нельзя понять, что это и есть совет - Высчитать максимальное кол-во блоков умещающихся на странице? Что тебе мешает?
Неужели нельзя не быть обиженкой и перестать везде видеть попытку задеть человека? "Неужели" - это не наезд, а удивление.
Дай денек.
Очень сложно понять, что ты подразумевал даже под этими словами "под строкой выше текущей"

[javedimka]

Lorem Ipsum, Мне лучше знать как я использовал слово, просто надо перестать быть человеком, который везде видит попытки его обидеть.

Answer 1

[Adamos]

Мне в подобной задаче помогало вот такое:

@media print {
* {
    page-break-after: avoid;
}
div.page {
    page-break-inside: avoid;
    page-break-after: auto;
}

Comments

[Lorem Ipsum]

Не помогает.

[WbICHA]

Lorem Ipsum, а к чему ты стили прописываешь?
Попробуй page-break-inside: avoid; прописать для строк и только.

[WbICHA]

Lorem Ipsum, в крайнем случае можешь посчитать сколько у тебя влазит строк и nth-child прописать последним page-break-after: always;.