Open In App

CSS page-break-before Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>
</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>
</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>
</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>
</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>
</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>
</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>
</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+


Last Updated : 02 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads