Использование разрыва страницы на скрытом div

Question

Как я могу получить page-break-after работать на div, который я показываю как display:none с @media screen?

Я хочу, чтобы изображение отображалось только при печати, а также разрыв страницы после него, чтобы остальные элементы div печатались на второй странице.

ПРИМЕР

вот результат, который я получаю:

Answer 1

В вашем текущем CSS у вас есть:

@media screen { .image { display:none; } }

@media print { .image { break-after:always;} }

.one { width:200px; height:100px; background-color:#339999;}

Где у вас есть:

     @media print { .image { break-after:always;} }

Попробуйте изменить это на:

     @media print { .image { page-break-after:always;} }

Надеюсь, это работает.

Answer 2

Это для других людей, которые смотрят этот обзор.
Новый файл CSS, я удалил свою ссылку для скачивания, вот она:

.image { display:none;}

@media print 
{ 
.image { page-break-after:always; display:table;} 
.one {display:table;}
}

.one { width:200px; height:100px; background-color:#339999;}