Explore available options like 'auto' and 'avoid' to enhance readability.
Introduction
The page-break-inside
CSS property controls page breaks within elements during printing. Though deprecated and replaced by the [break-inside
]WebsiteUrl property, many browsers still support it for compatibility. This article explains page-break-inside
in detail, including syntax, values, and practical examples.
Description
The page-break-inside
CSS property controls page breaks within elements during printing. This helps keep related content together on a single page, improving readability. Although replaced by [break-inside
]WebsiteUrl, understanding page-break-inside
is useful for maintaining older websites and ensuring compatibility.
Syntax
Keyword Values
auto
: Allows automatic page breaks inside the element.avoid
: Prevents page breaks inside the element, keeping the content together on a single page if possible.
Global Values
inherit
: Inherits thepage-break-inside
value from the parent element.initial
: Resets the property to its default value,auto
.revert
: Resets the property to its inherited value if it inherits, or to the user agent’s default otherwise.revert-layer
: Resets the property to its inherited value from a user-agent stylesheet.unset
: Acts asinherit
if the property is inherited, or asinitial
if not.
Page Break Aliases
The page-break-inside
property is treated as an alias of break-inside
for compatibility:
page-break-inside Value | break-inside Value |
---|---|
auto | auto |
avoid | avoid |
Formal Definition
The page-break-inside
property controls page breaks within block-level elements in the normal flow of the root element.
Property | page-break-inside |
---|---|
Initial Value | 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. |
Inherited | No |
Computed Value | As specified |
Animation Type | Discrete |
Formal Syntax
Examples
HTML
CSS
Result
The break-inside: avoid;
property ensures that elements (.list
, ol
, ul
, and p
) are not split across page breaks when printed, keeping related content together.
Avoiding Page Breaks Inside Elements
HTML
CSS
Output
When this page is printed, the ul
list elements will not be split across pages, ensuring the list appears as a single, coherent block of content.
Avoiding Page Breaks with none
HTML
CSS
Output
When this page is printed, the ul
list elements will not be split across pages, ensuring the list appears as a single, coherent block of content.
Specifications
The page-break-inside
property is defined in the CSS Paged Media Module Level 3 specification. This module provides rules for controlling the layout of content when printing web pages. You can find the details in the [CSS Paged Media Module Level 3]WebsiteUrl.
Browser Compatibility
The page-break-inside
property is supported by a wide range of browsers, including:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 8.0
- Firefox 19.0
- Safari 1.3
- Opera 7.0
Tips for Ensuring Compatibility
- Test Across Browsers: Always test your web pages across different browsers to ensure that the
page-break-inside
property is working as expected. - Use Polyfills: If you need to support very old browsers that do not support the
page-break-inside
property, consider using polyfills to mimic the behavior. - Fallback Solutions: Provide fallback solutions for browsers that do not support the property, ensuring that the content remains readable even if the property is not applied.
See Also
- [
break-before
]WebsiteUrl: Controls where page, column, or region breaks occur before an element. - [
break-after
]WebsiteUrl: Controls where page, column, or region breaks occur after an element. - [
break-inside
]WebsiteUrl: Controls how page, column, or region breaks occur inside an element. - [
page-break-after
]WebsiteUrl: Inserts page breaks after an element. - [
page-break-before
]WebsiteUrl: Inserts page breaks before an element. - [
orphans
]WebsiteUrl: Specifies the minimum number of lines of a block container that must be left at the bottom of a page. - [
widows
]WebsiteUrl: Specifies the minimum number of lines of a block container that must be left at the top of a page. - [HTML Reference Guide]WebsiteUrl: A comprehensive guide to HTML, including detailed explanations of various elements and attributes.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.