Page-break-inside: не работает

Question

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

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

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

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

• Print styles: How to ensure image doesn't span a page break

• What are most useful media="print" specfic ,cross browser compatible css properties?

• What is the correct way to do the CSS to avoid page breaks?

• page-break-inside doesn't work in Chrome?
• Work around for page-break-inside:avoid

Answer 1

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

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

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

Проверить это FIDDLE

Добавим, что в ваших печатных СМИ

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

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

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

<!--nextpage--> 

Answer 2

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

position: relative; 

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

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