CSS page-break-before Property

Last Updated : 28 Aug, 2024

The page-break-before property in CSS is used to add a page-break-before the specified element. This property helps to define how a document should behave when it is printed. Similarly page-break-before, page-break-after, and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be when printed.

Note: The page-break-before property cannot be used on absolutely positioned elements or an empty element. Use break-before property instead of page-break-before.

Syntax:

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

Values:

auto: Refers to automatic page break.

page-break-before: auto;

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: auto;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:auto;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

always: Page break is inserted after specified element box always.

page-break-before:always;

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: always;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:always;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions).
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

avoid: Page break is avoided whenever possible.

page-break-before:avoid;

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: avoid;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:avoid;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

left: Page break is inserted such that next page is depicted as the left page.

page-break-before:left;

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: left;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:left;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

right: Page break is inserted such that next page is depicted as the right page.

page-break-before:right;

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: right;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:right;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

initial: Property is set to default

page-break-before:initial

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before:initial;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:initial;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common.  
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

inherit: Property is inherited from parent element

page-break-before:inherit;

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>css_page_break_before</title> 
    <style> 
        p { 
            page-break-before:always; 
        } 
        
        div{ 
            page-break-before:default; 
        } 
        
        #c1{ 
            page-break-before:left; 
        } 
        
        #c2{ 
            page-break-before:inherit; 
        } 
    </style> 
</head> 
<body> 
    <p> 
        The oldest classical Greek and Latin writing had little or 
        no space between words and could be written in boustrophedon 
        (alternating directions). Over time, text direction (left to 
        right) became standardized, and word dividers and terminal 
        punctuation became common. The first way to divide sentences 
        into groups was the original paragraphos, similar to an 
        underscore at the beginning of the new group.
    </p> 
    <div> 
        <p id="c2"> 
        Indented paragraphs demonstrated in the US Constitution 
        In ancient manuscripts, another means to divide sentences 
        into paragraphs was a line break (newline) followed by an 
        initial at the beginning of the next paragraph. An initial 
        is an oversized capital letter, sometimes outdented beyond 
        the margin of the text. This style can be seen, for example, 
        in the original Old English manuscript of Beowulf. 
        </p> 
    </div> 
    <p id="c1"> 
        A second common modern English style is to use no indenting, 
        but add vertical white space to create "block paragraphs." On 
        a typewriter, a double carriage return produces a blank line 
        for this purpose; professional typesetters (or word processing 
        software) may put in an arbitrary vertical space by adjusting 
        leading. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

Note: The outcome of page-break-before property can be best viewed by opting for print preview of the webpage of the given HTML code. Create a similar code on your text editor like notepad++ and opt for print preview of the webpage created. Do try it for a better understanding.

Supported Browsers: The browsers supported by CSS page-break-before Property are listed below:

Google Chrome 1+
Edge 12+
Firefox 1+
Opera 7+
Safari 1.2+

Lavisha

Improve

Article Tags :

CSS page-break-before Property

Similar Reads

Thank You!

What kind of Experience do you want to share?