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

96

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

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

Что бы я хотел

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

Я все время жаловался на поплавки в LaTeX, а здесь я прошу такую ​​же функциональность ... Можно ли это сделать? Меня не обязательно беспокоит, что он работает во всех браузерах, поскольку это часто просто разовый документ, который я пишу для преобразования в PDF.

Дэвидтбернал
источник
45
Голосуйте за отличное использование
графических
@NickG Многие согласны, действительно потрясающая диаграмма ASCII!

Ответы:

66

Единственное, что я могу придумать, - это использовать одно (или потенциально несколько) из следующих правил css:

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

Я наполовину напомню, что эти объявления применяются только к элементам уровня блока (так что вам также придется определять display: block;на своем изображении или использовать какой-то контейнер-оболочку и применять к нему правила (будь то абзац, div, span , список и т. д.).

Вот несколько полезных обсуждений: « Какие media="print"свойства CSS являются наиболее полезными и совместимыми с кроссбраузерностью? »

Ссылки:

Дэвид просит восстановить Монику
источник
3
Ага, это работает. ( page-break-inside:avoid). Теперь мне напомнили, почему поплавки LaTeX - это боль.
davidtbernal
2
@notJim только поплавки?
Mindwin
Объяснение очень логичное, но по какой-то причине оно не работает для моего файла HTML5 с Firefox 54. Может быть, это просто ошибка, поскольку он работает с Internet Explorer 11 ...
Вольф
внутренний разрыв страницы - CSS | MDN - это страница, посвященная этому недостатку;)
Wolf
@Wolf Эта страница изменилась? Или я что-то упускаю? Почему это не работает в HTML5 с FF54?
The Oddler