Хотя мы живем в цифровую эпоху, где все может быть легко доступно, все еще есть много людей, которые предпочитают читать длинный текст с бумаги. Есть вероятность, что часть пользователей распечатает текст с вашего сайта, чтобы читать его не за компьютером.

Возможность приведения содержимого в вид, подходящий для печати, существовала давно. Мы можем сделать это, используя правило @media в таблице стилей, следующим образом:

@media print { /* Правила стиля */ }

Есть несколько свойств, позволяющих оформить содержимое веб-страницы для приведения в вид, подходящий для печати, и мы расскажем об одном из них: разрыве страницы.

Что оно делает?

Если вы работали с текстовыми редакторами, такими как Microsoft Word и Pages, вам должно быть знакомо меню разрыва страницы, которое позволяет перенести текст на следующую страницу.

Этот модуль делает то же самое, позволяя управлять тем, как будет переносится содержимое веб-страницы, страница за страницей.

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

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

Будет лучше выглядеть, если заголовок и нижняя висячая строка начнутся на следующей странице.

Чтобы это сделать, мы используем свойство page-break-after и зададим ему значение always , чтобы заставить следующий элемент перейти на следующую страницу.

Page-break { page-break-after : always ; }

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

With the Eraser feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t.

The phone to travel With

S Translator is going to be a great tool for your travels as ...

Теперь заголовок и нижняя висячая строка начнутся на следующей странице.

Верхние и нижние висячие строки

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

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

Используя свойства orphans (нижняя висячая строка) и widows (верхняя висячая строка) мы можем задать минимальный порог. В приведенном ниже примере мы задаем, чтобы как минимум три строки остались внизу или в начале абзаца, где происходит разрыв страницы.

P { orphans : 3 ; widows : 3 ; }

Дополнительные источники

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

Перевод — Дежурка

Блок страницы состоит из области страницы, где располагается содержимое и области полей, окружающей область страницы. Правило @page используется для изменения некоторых css-свойств при печати документа. Изменить можно только поля элемента margin , а также задать разрывы страниц в указанном месте.

@page { margin: 2in; }

Можно задавать отдельные поля документа внутри правила @page , такие как margin-top , margin-right , margin-bottom , margin-left:

2. Разрывы страниц

Управлять разрывами страниц можно с помощью свойств page-break-before , page-break-after и page-break-inside . Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static .

page-break-before

Значения:
auto
always	Всегда добавляет разрыв страницы перед элементом.
avoid	Отменяет размещение разрыва перед элементом, если это возможно.
left	Добавляет один или два разрыва страниц перед элементом, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right	Добавляет один или два разрыва страниц перед элементом. Элемент будет печататься, начиная с верха правой границы. Следующая страница будет форматироваться как правая страница.
inherit

Синтаксис:

@media print { h1 {page-break-before: always;} }

page-break-after

Значения:
auto	Значение по умолчанию, задает автоматические разрывы страниц.
always	Всегда добавляет разрыв страницы после элемента.
avoid	Отменяет добавление разрыва после элемента, если это возможно.
left	Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right	Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как правая страница. Элемент будет печататься, начиная с верха правой границы.
inherit	Наследует это свойство от родительского элемента.

Синтаксис:

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

Свойство page-break-inside говорит браузеру, может ли страница разрываться внутри элемента или нет. Но в случае, если элемент оказывается длиннее страницы, то разрыв неизбежен.

Как справляться с разрывами страниц при печати большой таблицы HTML (8)

У меня есть проект, который требует печати таблицы HTML со многими строками.

Моя проблема заключается в том, как таблица печатается на нескольких страницах. Он иногда вырезает строку пополам, делая ее нечитаемой, потому что одна половина находится на краю страницы, а остальная часть печатается в верхней части следующей страницы.

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

Используйте эти свойства CSS:

Page-break-after page-break-before

Например:

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

Ни один из ответов здесь не работал для меня в Chrome. AAverin на GitHub создал для этого полезный Javascript, и это сработало для меня:

Просто добавьте js к вашему коду и добавьте класс splitForPrint в таблицу, и он аккуратно разделит таблицу на несколько страниц и добавит заголовок таблицы на каждую страницу.

Примечание: при использовании разрыва страницы: всегда для тега он создает разрыв страницы после последнего бита таблицы, каждый раз создавая абсолютно пустую страницу! Чтобы исправить это, просто измените его на page-break-after: auto. Он сломается правильно и не создаст лишнюю пустую страницу.

@media print { table { page-break-after:auto } tr { page-break-inside:avoid; page-break-after:auto } td { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-group } tfoot { display:table-footer-group } } ....

Принятый ответ не работал для меня во всех браузерах, но после того, как css действительно работал для меня:

Tr { display: table-row-group; page-break-inside:avoid; page-break-after:auto; }

Структура html была:

...

В моем случае возникли некоторые дополнительные проблемы с thead tr , но это решило исходную проблему сдерживания строк таблицы.

Из-за проблем с заголовком я в конечном итоге закончил:

#theTable td * { page-break-inside:avoid; }

Это не помешало рядам сломаться; только содержимое каждой ячейки.

Я закончил с подходом @ vicenteherrera, с некоторыми настройками (которые, возможно, являются бутстрапом 3).

В принципе; мы не можем сломать tr s или td s, потому что они не являются элементами уровня блока. Поэтому мы вставляем div s в каждый и применяем наши правила page-break-* для div . Во-вторых, мы добавляем некоторые дополнения к вершине каждого из этих divs, чтобы компенсировать любые артефакты стиля.

@media print { /* avoid cutting tr"s in half */ th div, td div { margin-top:-8px; padding-top:8px; page-break-inside:avoid; } } $(document).ready(function(){ // Wrap each tr and td"s content within a div // (todo: add logic so we only do this when printing) $("table tbody th, table tbody td").wrapInner(""); })

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

Я недавно решил эту проблему с хорошим решением.

AvoidBreak { border: 2px solid; page-break-inside:avoid; }

Function Print(){ $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") }); $(".tableToPrint tr").wrap(""); window.print(); }

Работает как шарм!

Я проверил множество решений, и никто не работал хорошо.

Поэтому я попробовал небольшой трюк, и он работает:

tfoot со стилем: position: fixed; bottom: 0px; position: fixed; bottom: 0px; помещается внизу последней страницы, но если нижний колонтитул слишком высок, он перекрывается содержимым таблицы.

tfoot только с: display: table-footer-group; не перекрывается, но не находится в нижней части последней страницы...

Положим два tfoot:

TFOOT.placer { display: table-footer-group; height: 130px; } TFOOT.contenter { display: table-footer-group; position: fixed; bottom: 0px; height: 130px; } your long text or high image here

Один резервирует место на не последних страницах, второй - в вашем личном нижнем колонтитуле.

Test table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-group } tfoot { display:table-footer-group }

heading

notes

Разрывы страниц

В следующих разделах описана модель форматирования страницы, используемая в CSS2. Для указания агенту пользователя места, где он может или должен осуществить разрыв страницы, и страницы (левой или правой), на которой он должен продолжить вывод содержимого, используется пять различных свойств. Каждый разрыв страницы прерывает отображение содержимого в текущем страничном блоке и инициирует вывод оставшейся части дерева документа в новом страничном блоке.

Разрывы до и после элементов: "page-break-before", "page-break-after", "page-break-inside" "page-break-before"

Начальное значение: auto
Наследование: нет
Процентное задание: N/A

"page-break-after"

"page-break-inside"

Значение: avoid | auto | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Значения данных свойств имеют следующий смысл:

auto

Не инициирует и не запрещает разрыва страницы до (после или внутри) генерируемого блока.

always

Всегда инициирует разрыв страницы до (после) генерируемого блока.

avoid

Отменяет разрыв страницы до (после или внутри) генерируемого блока.

left

Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как левая страница.

right

Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как правая страница.

Потенциально возможное местоположение разрыва страницы определяется свойством "page-break-inside" родительского элемента, свойством "page-break-after" предшествующего элемента и свойством "page-break-before" последующего элемента. Если значения этих свойств отличны от "auto", то значения "always", "left" и "right" превосходят по приоритету значение "avoid". В разделе о допустимых разрывах страниц указаны четкие правила, позволяющие инициировать или запрещать разрывы страниц с помощью этих свойств.

Использование именованных страниц: "page" "page"

Значение: | auto
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Свойство "page" может использоваться для определения конкретного типа страницы, на которой будет отображен элемент.

В этом примере все таблицы будут помещены по правую сторону страницы (называемой "rotated"), имеющей альбомную ориентацию:

TABLE {page: rotated; page-break-before: right}

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

В следующем примере две таблицы отображаются на страницах с альбомной ориентацией (естественно, на одной и той же странице, если они обе умещаются на ней), тип страницы "narrow" не используется вообще, несмотря на то, что он установлен для элемента DIV.

@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}

используются в документе

...

Разрывы страниц внутри элементов: "orphans", "widows" "orphans"

Значение: | наследуемое
Начальное значение: 2
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

"widows"

Свойство "orphans" определяет минимальное количество строк абзаца, которые должны быть оставлены в нижней части страницы. Свойство "widows" определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы. Примеры использования данных свойств для управления разрывами страниц приводятся ниже.

Подробную информацию о форматировании абзацев можно получить в разделе о линейных блоках.

Допустимые разрывы страниц

В нормальном потоке разрыв страницы может находиться в следующих местах:

В пространстве, отведенном для вертикальных полей между структурными блоками. Если разрыв страницы осуществляется в этом месте, то вычисляемые значения соответствующих свойств "margin-top" и "margin-bottom" устанавливаются равными "0".

Между линейными блоками внутри блока структурного уровня.

Разрывы рассматриваемого типа удовлетворяют следующим правилам:

Правило А: Разрыв (1) разрешен, только если значения свойств "page-break-after" и "page-break-before" всех элементов, порождающих блоки, встречающиеся в месте разрыва, допускают его осуществление, что имеет место тогда, когда по крайней мере одно из них имеет значение "always", "left" или "right", или все они одновременно имеют значение "auto".
Правило Б: Тем не менее, если все эти свойства имеют значение "auto", а свойство "page-break-inside" ближайшего общего для всех названных элементов предка имеет значение "avoid", то разрыв страницы в этом месте запрещается.
Правило В: Разрыв страницы (2) разрешен, только если количество линейных блоков между разрывом и началом заключительного структурного блока равно значению свойства "orphans" или превышает его, а количество линейных блоков между разрывом и концом блока равно значению свойства "widows" или превышает его.
Правило Г: Более того, разрыв страницы (2) разрешен, только если свойство "page-break-inside" имеет значение "auto".

Если приведенные выше правила не позволяют вставить достаточное количество разрывов, то во избежание выхода содержимого за пределы страничного блока правила Б и Г не учитываются, что позволяет создать дополнительные разрывы.

Если и после этого не удается достигнуть достаточного количества разрывов, то для поиска дополнительных точек разрыва не учитываются правила А и В.

Разрывы страницы не могут осуществляться в абсолютно позиционируемых блоках.

Принудительные разрывы страниц

Разрыв страницы должен осуществляться (1), если хотя бы одно из всех свойств "page-break-after" и "page-break-before" элементов, порождающих блоки, встречающиеся в месте разрыва, принимает значение "always", "left" или "right".

Разрыв страницы также должен осуществляться (1), если значения свойства "page" линейных блоков, находящихся непосредственно до и после разрыва, различны.

"Наилучшие" разрывы страниц

Язык CSS2 не определяет, какой именно разрыв страницы из множества допустимых разрывов должен использоваться; CSS2 не запрещает агентам пользователей вставлять разрывы страниц в любом месте или вообще не использовать их. Но в спецификации CSS2 настоятельно рекомендуется, чтобы агенты пользователей соблюдали следующие эвристические правила (до тех пор, пока не окажется, что они иногда противоречат друг другу):

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

Предположим, что таблица стилей содержит свойства "orphans: 4" и "widows: 2", а в нижней части текущей страницы доступно 20 строк (линейных блоков):

если последний абзац текущей страницы содержит не более 20 строк, то он должен остаться на текущей странице;
если абзац содержит 21 или 22 строки, а вторая часть абзаца не должна нарушать ограничения, устанавливаемого свойством "widows", то в силу этого его вторая часть должна состоять из двух строк;
если в абзаце более 23 строк, то первая его часть должна состоять из 20 строк, а вторая часть должна включать все остальные строки.

Теперь предположим, что значение свойства "orphans" равно "10", значение свойства "widows" равно "20", а в нижней части текущей страницы доступно 8 строк:

если абзац в конце текущей страницы содержит не более 8 строк, то он должен остаться на текущей странице;
если абзац содержит более 9 строк, то его нельзя делить (т.к. при этом будет нарушено ограничение, устанавливаемое свойством "orphans"). Поэтому его следует переместить на следующую страницу в виде блока.

Windows 7