печать таблицы стилей, одна страница печатает и обрезает оставшийся текст

Question

Я работаю над распечатанным списком событий, принтер печатает одну страницу нормально, но обрезает часть текста внизу, затем печатает вторую пустую страницу

Я перепробовал все, что знаю, но в растерянности.

Answer 1

В файле print.css установите overflow: visible вместо overflow: auto на div#content. Это исправило это для меня в Firefox по крайней мере. Определение автоматического переполнения: «Если переполнение обрезано, необходимо добавить полосу прокрутки, чтобы увидеть остальную часть содержимого» - но полосы прокрутки не существуют на печатных страницах.

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

Answer 2

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

Проверьте, используете ли вы display: flex; для обрезанного элемента. Это была проблема для меня, установив его на block исправил.

Answer 3

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

<div class="container">
    <div class="content-cutting-off-here">
        Some long text that gets cut off at the end of the page...
    </div>
</div>

Большинство людей устанавливают контейнеры для отображения block или inline-block. Для меня это было отрезание текста, и установка его на inline обошла это. Это также делает width и height неактуальными для нарушающего контейнера div; что я нашел неудобство при печати. ​​

@media print {
    .container {
        display: inline;
    }
}

Вот отличная статья, которая помогла мне с этим решением.

Answer 4

Если какой-либо из контейнеров, которые вы пытаетесь распечатать, всплывает, они обрезаются, как вы видите.

В файле print.css убедитесь, что вы отключили все возможные варианты, не разрушая макет. Это боль, но браузерная поддержка печати в лучшем случае слабая.

Answer 5

Я только что решил эту проблему в ie7. Это было в проекте Sharepoint, в котором различные ячейки таблицы и / или элементы div установлены на высоту: 100%. При печати он печатал длинные формы, первая страница или 2 печатались как обычно, затем пустые страницы вместо остальных.

В моей таблице стилей печати я установил для этих таблиц и div значение height: auto, и теперь оно печатается нормально.

У меня сейчас другая проблема в IE8. UGH!

Answer 6

Вы уже используете значение print для атрибута media для своей таблицы стилей, например

<link rel="stylesheet" href="print.css" media="print" /> 

Возможно, вы также захотите использовать атрибуты page-break-before для элементов, которые не хотите разбивать.

Answer 7

если overflow:visible; не работает, попробуйте overflow-y:visible;

(у меня было body{overflow-y:scroll;}, и body{overflow:visible;} в print.css не переписал его ...)

Answer 8

Я настроил свой печатный лист так, чтобы печатать только модальное содержимое. Моим решением было сделать модальное position: absolute;. Мой модал изначально был position: fixed;.

Answer 9

просто настройка дисплей: встроенный решил мою проблему.

Ссылка на ссылку, которую я получил, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm

Answer 10

Я только что столкнулся с этой проблемой и искал в интернете решение, отвечающее моим конкретным потребностям. В моем случае у меня было около 7 таблиц, вложенных в большую таблицу. Единственный способ заставить всю веб-страницу печатать и правильно отображать в режиме предварительного просмотра - это использовать разрывы страниц. Разрывы страниц - это свойства CSS, которые позволяют вам задавать и / или принудительно разрывать страницы, прикрепляя свойство к элементам блока.

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before