page-break-inside в CSS


page-break-ins >

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

Тип свойства

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

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

Значения

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

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

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

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

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

Синтаксис

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

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

СSS Свойство page-break-inside

Пример

Избегайте разрыва страницы внутри элементов

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

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

Совет: Свойство properties: page-break-before, page-break-after и page-break-inside помогает определить, как документ должен вести себя при печати.

Примечание: Вы не можете использовать это свойство для абсолютно позиционированных элементов.

Значение по умолчанию: auto
Унаследованный: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS2
JavaScript синтаксис: object.style.pageBreakIns

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

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

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

Пример

Избегайте разрыва страниц внутри

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

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

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

Примечание: Это свойство нельзя использовать для элементов с абсолютной позицией.

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

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

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

CSS page-break-inside Property

Description

The page-break-inside CSS property force or prohibit a printing page break inside an element. 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-inside : auto | avoid | initial | inherit

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

Example

  • @media print <
  • ul <
  • page-break-inside : avoid ;
  • >
  • >

The style rule in the above example sets the page-breaking behavior to avoid splitting unordered lists over two pages.

Note: The page-break-inside 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 inside the element, if necessary. This is default value.
avoid Avoid a page break inside the element.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element page-break-inside property.

Browser Compatibility

The page-break-inside property is not supported by the Firefox.

Basic Support—

  • Firefox (none)
  • Google Chrome 1+
  • Internet Explorer 8+
  • Apple Safari 1.3+
  • Opera 7+

Warning: Avoid using this property as it is poorly suppord. Also use page breaking as few times as possible and avoid page breaking inside table elements, floating elements, and block elements with borders.

Which browsers support page break manipulation using CSS and the page-break-ins > Ask Question

I’m trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).

I’ve tried all the tutorials that supposedly describe exactly how to do this, but nothing works. Is this an issue of browser support or has anyone actually gotten this working, the exact bit of CSS looks like this:

7 Answers 7

Safari 1.3 and later (don’t know about 4) do not support page-break-inside (try it, or see here: http://reference.sitepoint.com/css/page-break-inside). Neither do Firefox 3 or IE7 (don’t know about 8).

In a practical sense, support for this attribute is SO spotty, it doesn’t make sense to use it at all at this point. You’d be lucky if even 10% of your visitors have browsers that can support this.

The solution I used was to add

to certain divs, or add a «page-breaker» div in where you want breaks. This is quite ham-handed, I know, because it doesn’t do quite what you want, and causes content to not reach the bottom of the printed page, but unfortunately there isn’t a better solution (prove me wrong!).

Another approach is to create a stylesheet that removes all extraneous elements ( display:none ) and causes the main content to flow in one main column. Basically, turn it into a single column, text-only document.

Finally, avoid floats and columns when styling for printers, it can make IE (and FF) act wacky.

page-break-inside

The page-break-inside property is used to specify whether or not a page break should occur inside 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.

Sometimes, the page breaks in the middle of an element such as an image, which causes it to be split and span across two pages. This is usually an undesirable effect.

An image split into two spanning across two pages because of a page break inside it.

You may want to avoid page breaks inside tables, code snippets, lists of items, and images, for example. Using the page-break-inside property, you can do just that.

In the following example, we’re using the @media rule to specify page break styles for printed documents. We’re going to tell the user agent to avoid page breaks inside images. At this point, it is important to note that the page-break-inside property can only be applied to block-level elements, and the user agent can apply them to ‘table-row’ elements too. Considering that an image is an inline-level element and not a block-level element, you would have to reset its display to block or inline-block .

By doing this, the user agent will print the entire image on a single page, either at the end of a page if there is enough space, or at the start of another one if there isn’t.

Similarly, you can avoid page breaks inside tables, lists, and any other block-level element.

A code block split into two spanning across two pages because of a page break inside it. This can be avoided using the page-break-inside property.


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.

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

    Browser Support

    CSS page-break properties

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

    Supported from the following versions:

    Desktop

    • 4
    • 65
    • 10
    • 15
    • 3.1

    Mobile / Tablet

    • 3.2
    • 2.1
    • all
    • 78
    • 68

    * denotes prefix required.

    Further Reading

    Written by Sara Soueidan. Last updated March 17, 2020 at 1:08 pm by Mary Lou.

    Do you have a suggestion, question or want to contribute? Submit an issue.

    Collective #563

    November 7, 2020

    Game Off 2020 * Pure CSS Lace * The Svelte Handbook * GraphQL Crash Course * React Query.

    Collective #562

    October 31, 2020

    Lesser Known Coding Fonts * Full Stack Authentication * Neural Synesthesia * Glaze * Free for devs.

    CSS — page-break-inside

    Description

    The page-break-inside property indicates whether page breaks should be allowed within 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 values of page-break-before and page-break-after for any descendant elements.

    Possible Values

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

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

    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 break-ins >

    The CSS break-inside property allows you to prevent an unwanted break within a multi-column layout, paged media, and in multi-region contexts.

    For example, when working with multi-column layouts, you might prefer ordered lists to display within one column (instead of spilling over to the next column part-way through the list). In this case, you could use the break-inside property to avoid this unwanted break.

    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.

    Basic Property Information

    Example Code

    Basic CSS

    Working Example within an HTML Document

    This example uses vendor prefixes for the multi-column layout due to lack of browser support for the official standard at the time of writing.

    Also note that at the time of writing, most browsers support the break-inside property from the CSS 2.1 specification, but not the most recent spec.

    CSS Specifications

    • The break-inside property is defined in CSS Fragmentation Module Level 3 (W3C Candidate Recommendation, 14 January 2020).
    • The property is also defined in CSS Regions Module Level 1 (Editor’s Draft). This spec extends the property from previous specs to handle region breaks and adds the region keyword.
    • The break-inside property is also defined in CSS Multi-column Layout Module (W3C Candidate Recommendation 12 April 2011).
    • The break-inside property is defined in CSS 2.1 (W3C Recommendation 07 June 2011)

    Browser Support

    The following table provided by Caniuse.com shows the level of browser support for this feature.

    Vendor Prefixes

    For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

    This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

    The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

    Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

    You can also use Autoprefixer with preprocessors such as Less and Sass.

    CSS | page-break-inside Property

    The page-break-inside property in CSS is used to specify how the page breaks inside the element to which it is applied while printing. It inserts a page break or sometimes it used to avoid page break inside an element while printing.

    Syntax:

    Property Values:

      auto: It is the default value. This value represents the page break automatically.

    Syntax:

    avoid: It avoids a page break inside the element.
    Syntax:

    initial: It sets the page-break-inside property to its default value.
    Syntax:

    inherits: The page-break-inside property is inherited from its parent.
    Syntax:

    Note: This property is mostly used to print a document.

    Print Media Query:

    Example 1: This example use page-break-inside property value to avoid.

    Какие браузеры поддерживают обработку разрыва страницы с помощью CSS и элемента page-break-inside?

    Я пытаюсь использовать директиву CSS page-break-inside, класс которой должен быть прикреплен к тегу div или тегу таблицы (я думаю, что это может работать только с блочными элементами, в этом случае это должна быть таблица).

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

    7 ответов

    Firefox, по-видимому, до сих пор не делает.

    Я пытаюсь использовать директиву CSS page-break-inside, класс которой должен быть прикреплен к тегу div или тегу таблицы (я думаю, что это может работать только с блочными элементами, в этом случае это должна быть таблица).

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

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

    Safari 1.3 и более поздние версии (не знаю о 4) не поддерживают page-break-inside (попробуйте или см. здесь: http://reference.sitepoint.com/css/page-break-inside ). Как и Firefox 3 или IE7 (не знаю о 8).

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

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

    к некоторым divs, или добавьте div «page-breaker» В где вы хотите перерывы. Это довольно ветхий, я знаю, потому что он не делает то, что вы хотите, и заставляет контент не доходить до нижней части печатной страницы, но, к сожалению, нет лучшего решения (докажите, что я неправ!).

    Другой подход заключается в создании таблицы стилей, которая удаляет все посторонние элементы ( display:none ) и заставляет основное содержимое течь в одном главном столбце. В основном, превратите его в один столбец, текстовый документ.

    Наконец, избегайте поплавков и столбцов при стилизации для принтеров, это может заставить IE (и FF) действовать странно.

    Из предварительных поисков трудно найти актуальную статистику по поддержке браузера для этого, но кажется, что Firefox 4beta6 поддерживает его, а Chrome 7-нет. Chrome также разбивает страницы на половину строки текста, так что часть текста отображается на одной странице, а часть-на следующей. Нетипичное отсутствие внимания к деталям, но я думаю, что ни Google, ни Apple не заботятся о печати.

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

    • Firefox не поддерживает это с 2010-11-30, и, таким образом, не будет в Firefox 4.
    • IE8 поддерживает page-break-inside: avoid — но когда я попробовал это на IE9, это не очень успешно избегает разрывов страниц (это может быть регрессия, или, возможно, IE8 также способен избежать разрывов страниц в очень простых случаях).
    • AFAIK это не работает ни в одном браузере webkit; конечно, не в chrome.
    • Он действительно работает в опере, даже на реальных сайтах.

    Как немного больше информации далее к ответу Eamon Nerbonne на рендеринге IE (IE8+), вам нужно убедиться, что браузер находится в стандартном режиме. Эта статья на MSDN показывает, что необходимо — включая мета-тег в вашем html, чтобы заставить проблему:

    Чувствует себя клудги, но там у вас есть… кажется, работает более последовательно.

    Илон Маск рекомендует:  Asp простые сценарии
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL