Разрыв страницы: не работайте

Question

У меня есть таблица стилей печати для моего (Wordpress) сайта, и я хочу, чтобы изображения печатались на одной странице, а не распределялись по страницам. В некоторых случаях даже строки текста разделяются по страницам. Я включил img {page-break: avoid;) в моей таблице стилей печати, но не повезло. Я нашел несколько предыдущих ответов, но они вроде старые.

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

Сайт: http://74.220.217.211/housing-developments/grafton-townhomes/

Похожие сообщения:

• Стили печати: Как обеспечить, чтобы изображение не занимало разрыв страницы

• Какие наиболее полезные media="print" специфические, совместимые с браузером свойства css?

• Как правильно сделать CSS, чтобы избежать разрывов страниц?

• разрыв страницы внутри Chrome не работает?
• Обходите для разрыва страницы: избегайте

Answer 1

Возможно, родительский элемент img имеет стиль:

display: flex

Тогда взлом внутрь не работает.

Например, если вы измените стиль отображения родительского элемента на:

display: block

Тогда все заработает.

Answer 2

В разных браузерах есть странные ограничения для файлов. В разных статьях предлагались следующие ограничения:

• Если в дереве документа есть родитель или дедушка или бабушка с display:flex или же display:grid, избежать разрывов страниц не получится.
• Если родительский элемент есть, не работает.
• В некоторых случаях родительскому элементу необходимо, чтобы значение работало в дочерних элементах. (Точные правила неизвестны.)
• В некоторых случаях как родительский элемент, так и элемент, который не должен нарушать потребности position:relative для значения avoidработать. (Точные правила неизвестны.)
• Родительский элемент НЕ ДОЛЖЕН иметь display: inline-block.
• Элемент НЕ ДОЛЖЕН иметь display:table-cell.

Короче, @media print стилей, вероятно, следует избегать использования float, flex, grid, position:absolute и position:stickyесли вам нужно использовать. Для лучшей совместимости с разными браузерами попробуйте определить все дерево от корня до родителя с помощью display:block и элемент, который не должен порваться с display:inline-block в добавление к .

Ни одно из вышеперечисленных исключений не является частью каких-либо спецификаций, поэтому это просто ошибки или ограничения в реализациях браузера.

Также обратите внимание, что хотя последние спецификации предпочитают break-inside: avoid вместо page-break-inside: avoidРеальный браузер поддерживает все еще очень плохо. Я бы рекомендовал объявить оба:

      .nobreak
{
  page-break-inside: avoid;
  break-inside: avoid
}

Answer 3

Я думаю, что проблема может исходить от position свойство элементов. Элемент, который вы не хотите разбивать в конце страницы, и его родитель должен быть объявлен как:

position: relative;

Остальные стили кода верны и должны выглядеть

@media print {
    img {
        page-break-before: auto;
        page-break-after: auto; 
        page-break-inside: avoid;
        position: relative;
    }
}

Answer 4

Используйте @media print и установите подходящую высоту для основного элемента страницы или установите небольшой размер для изображения

Например:

@media print{
body{
height: 800px;
}
}

Answer 5

img {
    page-break-before: auto;
    page-break-after: auto; 
    page-break-inside: avoid;
    display: block;
}

это будет работать

Answer 6

Попробуй это:

.site-container, .site-inner (heck body tag possibly) {position:relative;}

p {
    page-break-inside: avoid;
    position: relative; 
}

Проверьте эту СКРИПКУ

Добавьте это в свои печатные СМИ

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

img {
    page-break-before: auto;
    page-break-after: auto; 
    page-break-inside: avoid;
    display: block;
}

Наконец, Wordpress имеет это, но на самом деле не уверен, поможет ли это...

 <!--nextpage-->