page-break-after в CSS


page-break-after

Свойство CSS page-break-after используется для создания принудительного разрыва страницы после элемента, при выводе HTML-документа на печать.

Тип свойства

Применяется: к блочным элементам.

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

Значения

Значением свойства page-break-after является одно из ключевых слов разрешающее или запрещающее создавать разрыв после элемента.

  • auto — браузер сам решает создавать или нет разрыв страницы после блочного элемента.
  • always — всегда создает принудительный разрыв страницы после блочного элемента.
  • avo >page-break-after от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: auto.

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

Синтаксис

Пример CSS: использование page-break-after

Если на сайте используются стили для печати, то часто имеет смысл создавать для этого отдельные таблицы и подключать их с помощью At-правила @media или тега .

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: До 9.0 9.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Частично Частично Да Частично

Internet Explorer 6.0 и 7.0 не понимают значение inherit , а до версии 8.0 включительно, трактуют значения left и right , как always .

Chrome, Firefox и Safari не понимают значения avoid , left и right .

Свойство break-after

Свойство break-after определяет принципы расстановки разрыва страниц и колонок после текущего элемента. По умолчанию, разрывы страниц или колонок расстанавливаются автоматически и не наследуются от родительских элементов. Значения always, avoid, left, right, page, avoid-page используются только при форматировании страничных документов, например, при печати, и игнорируются для представлений без разбивки, например, во время отображения в браузере. Значения column, avoid-column используются для многоколоночного текста.

Допустимые значения

  • CSS2 CSS3 auto — автоматический разрыв страницы или колоноки после текущего элемента (по умолчанию)
  • CSS2 CSS3 always — обязательный разрыва страницы после текущего элемента
  • CSS2 CSS3 avo >CSS2 CSS3 left — принудительная расстановка одного или двух разрывов страниц после текущего элемента, таким образом, чтобы следующая страница форматировалась как левая страница
  • CSS2 CSS3 right — принудительная расстановка одного или двух разрывов страниц после текущего элемента, таким образом, чтобы следующая страница форматировалась как правая страница
  • CSS3 page — обязательный разрыв и переход к новой страницы после текущего элемента
  • CSS3 column — обязательный разрыв и переход к новой колонки после текущего элемента
  • CSS3 avo >CSS3 avo >break-after : auto; — равномерное распределение

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

break-after : column; — принудительные разрывы колонок

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

Свойство break-after определено в спецификации CSS 3 модуль Multi-column Layout (многоколоночная разметка), применяется к блочным элементам, и действует на всех страничные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

CSS page-break-after Свойство

Пример

Всегда вставляйте разрыв страницы после элемента :

Определение и использование


Свойство page-break-after добавляет разрыв страницы после заданного элемента.

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

Примечание: Это свойство нельзя использовать в пустой

Значение по умолчанию: auto
Inherited: no
Animatable: no. Читайте о animatable
Version: CSS2
Синтаксис JavaScript: object.style.pageBreakAfter=»always»

Поддержка браузера

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

Свойство
page-break-after 1.0 4.0 1.0 1.2 7.0

Примечание: Ни один из браузеров не поддерживает «Избегайте».

Примечание: Браузеры могут интерпретировать «Left» и «Right» как «всегда».

CSS page-break-after Property

Description

The page-break-after CSS property insert page breaks after an element when printing a document. This properties applies to block-level elements that generate a box. It won’t apply on an empty

that won’t generate a box.

The following table summarizes the usages context and the version history of this property.

Default value: auto
Applies to: Block-level elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 2, 3

Syntax

The syntax of the property is given with:

page-break-after : auto | always | avoid | left | right | initial | inherit

The example below shows the page-break-after property in action.

Example

  • @media print <
  • p.footnotes <
  • page-break-after : always ;
  • >
  • >

The style rule in the above example sets the page-breaking behavior to always break the page and move to a new page after footnotes.

Note: The page-break-after property only applicable to the block-level elements in the normal flow of the root element, or table-row elements.

Property Values

The following table describes the values of this property.

Value Description
auto Insert a page break after the element, if necessary. This is default value.
always Always force a page break after the element.
avoid Avoid a page break after the element.
left Forces either one or two page breaks after the element, so that the next page will be a left-hand page.
right Forces either one or two page breaks after the element, so that the next page will be a right-hand page.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element page-break-after property.

Browser Compatibility

The page-break-after property is partially supported in all major modern browsers.

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1.2+
  • Opera 7+

Warning: Internet Explorer 8 and earlier versions don’t support the values left and right ; either value is interpreted as the value always . Firefox, Chrome, and Safari don’t support the values avoid , left , or right .

page-break

Easily manage projects with monday.com

There isn’t an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before , page-break-after and page-break-inside . These properties help define how the document is supposed to behave when printed. For example, to make a printed document more book-like.

Properties

page-break-before

The page-break-before property adds a page-break before the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-before property. This new property also handles column and region breaks while being syntactically compatible with page-break-before . Thus before using page-break-before , check if you can use break-before instead.

A common use case for this is to apply it to the selector #comments so a user printing a page with comments could easily choose to print the whole document but stop before the comments cleanly.

page-break-after

The page-break-after property adds a page-break after the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-after property. This new property also handles column and region breaks while being syntactically compatible with page-break-after . Thus before using page-break-after , check if you can use break-after instead.

page-break-inside

The page-break-inside property adds a page-break inside the element to which it is applied.

Syntax

The left and right values for page-break-before and page-break-after refer to a spread layout (like a book) where there are distinct left and right pages. They work like this:

  • left forces one or two page breaks after the element so that the next page is formatted as a left page.
  • right forces one or two page breaks after the element so that the next page is formatted as a right page.

Consider always as a mix of both. The specification says:

A conforming user agent may interpret the values ‘left’ and ‘right’ as ‘always’.

Example

This code snippet does 3 things:

  • it forces a page-break before all h2 headings (perhaps h2 tags in your document are chapter titles that deserve a fresh page)
  • it prevents page-breaks right after sub-headings because that looks odd
  • it prevents page-breaks inside pre tags and block-level quotes
  • @page
  • break-after
  • break-before
  • orphans
  • w > Chrome Safari Firefox Opera IE Android iOS Any Any Any 7+ 4+ TBD TBD

You can print from mobile devices, like AirPrint on iOS, but we haven’t tested this much. If anyone has data on support, let us know.

How to apply CSS page-break to print a table with lots of rows?

I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-before and page-break-after CSS properties. Where do I put them in my code in order to force page breaking if needed?

8 Answers 8

You can use the following:

Refer the W3C’s CSS Print Profile specification for details.

Wherever you want to apply a break, either a table or tr , you needs to give a class for ex. page-break with CSS as mentioned below:


and it will work as you required

Alternatively, you can also have div structure for same:

I have looked around for a fix for this. I have a jquery mobile site that has a final print page and it combines dozens of pages. I tried all the fixes above but the only thing I could get to work is this:

Unfortunately the examples above didn’t work for me in Chrome.

I came up with the below solution where you can specify the max height in PXs of each page. This will then splits the table into separate tables when the rows equal that height.

You will also need the below in your stylesheet

this is working for me:

If you know about how many you want on a page, you could always do this. It will start a new page after every 20th item.

page-break-after

The page-break-after property is used to specify whether or not a page break should occur after the element it is applied to.

Page breaks are applied to paged media, such as printed books or documents. When a page is broken, the layout ends in the current page and the remaining elements of the document are laid out in a new page. You can see this in PDF documents, where some pages have a lot of white space left, and content continues on the next page. If no page break rules are specified, the page may break inside pieces of content such as text, lists, code snippets, images, etc.

Image showing a page break with a paragraph of text spanning across two pages.

The page-break-after property also specifies on what page (left or right) the subsequent content should resume.

For example, you can tell the user agent to break a page after certain elements like chapter footnotes or appendices, colophons, tables of content, etc., therefore making sure that any content that comes after them will start in a new page.

In this screenshot taken from the book Designing For Emotion” by Aaron Walter, the page is broken at the end of the table of contents, so some space is left at the bottom, and any content that comes after the table of contents will start in a page after this one.

In the following example, we’re using the @media rule to specify page break styles for printed documents. We’ll select the #table-of-contents element and tell the user agent to break the page after the table of content:

Using page-break-after , you can cause a page break after the table of contents and tell the user agent to make sure the next page is right or left page. For example, if you want to start the first chapter after the table of contents on a right page (in a left-to-right language), you can do that by using the right value. See the Values and Examples sections below for more information and an example.

The page-break-after property is applied to block-level elements in the normal flow of the root element. User agents may also apply it to other elements, e.g., ‘table-row’ elements.

Trivia & Notes

Page breaks may help avoid or cause orphans and widows in pages.

When a page break splits a box, the box’s margins, borders, and padding have no visual effect where the split occurs.

This property is in progress of being replaced by the more generic break-after property. This new property also handles column and region breaks while being syntactically compatible with page-break-after . Thus after using page-break-after , check if you can use break-after instead.

Official Syntax

  • Syntax:
  • Initial: auto
  • Applies To: block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
  • Animatable: no
  • Values

    Examples

    The following example causes pages to break after a table of contents, but specifies that the content after that should start on a right page:

    In the same book, Designing For Emotion”, a page break is specified so that the content after the table of contents starts on a right page. It’s not apparent on the digital version since it’s not double-sided, but you can still see how the browser breaks two pages to make sure the content after the table of contents starts on the right page:

    Image showing an example of page-break-after: right

    Browser Support

    CSS page-break properties

    Properties to control the way elements are broken across (printed) pages.

    CSS :: Свойство page-break-after

    css -свойство page-break-after (от англ. page break after – разрыв строки после) используется для управления разрывами страницы после определяемых селектором блочных элементов.

    Характеристики

    • Значение по умолчанию: auto .
    • Применяется: к блочным элементам .
    • Наследуется: нет .
    • Анимируется: нет .
    • JavaScript: object.style.pageBreakAfter=»value» .

    Синтаксис

    page-break-after: always | auto | avoid | left | right

    CSS — page-break-after

    Description

    The page-break-after property indicates whether (and how many) page breaks should be allowed after an element’s box.

    The value of this property is not the sole factor in determining whether a page break should follow the element. This decision will also be affected by the value of page-break-before for a following element, and the value of page-break-inside for any ancestor elements.

    Possible Values

    auto − Page breaks should be neither forced nor prevented after the element’s box.

    always − A page break should be forced after this element’s box.

    avoid − No page break should be placed after the element’s box if at all possible.

    left − Force one or two page breaks after the element’s box, such that the next page on which an element is printed will be a left-hand page.

    right − Force one or two page breaks after the element’s box, such that the next page on which an element is printed will be a right-hand page.

    Applies to

    All the block level elements.

    Example

    Here is the example −

    It will produce the following result −

    For more detail please look into CSS Paged Media.

    CSS page-break-after

    The CSS page-break-after property is used to specify page breaks in paged media.

    Note that the page-break-after property is being replaced by the more generic break-after property, which can be used to force breaks on pages, columns, and regions.

    Syntax

    Possible Values

    In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

    initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

    Илон Маск рекомендует:  Что такое капча Зачем нужен ввод captcha
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL