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

Ответ 1

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

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

Ответ 2

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

<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;
    }
}

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

В моей таблице стилей печати я устанавливаю эти таблицы и divs в height: auto, и теперь он отлично печатает.

В IE8 у меня другая проблема. UGH!

Ответ 7

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

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

Ответ 8

Я исправил проблему, добавив overflow:visible; и давая ей padding-right: 30px;, чтобы заменить ширину полосы прокрутки.

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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