Проблема печати: предотвращение раздвоения DIV на страницах

Сталкиваетесь с дилеммой печати, когда динамические DIV разрезаются пополам между страницами? Эта проблема возникает при попытке распечатать длинные документы с многочисленными элементами DIV переменной высоты.

CSS-решение на помощь

Чтобы решить эту проблему, свойство CSS Break- внутри приходит на помощь. Указав значение ignore, вы можете гарантировать, что механизм рендеринга предотвращает разделение DIV на полпути. Вот фрагмент кода:

@media print {
  div {
    break-inside: avoid;
  }
}

Это решение поддерживается всеми основными браузерами, включая:

• Chrome 50
• Edge 12
• Firefox 65
• Opera 37
• Safari 10

Альтернативный вариант

Другой жизнеспособный вариант — использовать разрыв страницы внутри: избежать; вместо взлома внутрь: избегайте;. Однако этот подход устарел, и его следует использовать с осторожностью.