Open In App

CSS page-break-after Property

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

The page-break-after property in CSS is used to add a page-break after the stated element. 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-after property cannot be used on absolutely positioned elements or an empty <div> element. 

Syntax:

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

Default Value : Its default value is auto.

Property values:

  • auto : This value refers to automatic page-break.
page-break-after:auto;
  • Example

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: auto
    </title>
</head>
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
</body>
</html>


  • always: On using this value, page break is inserted after specified element box always.
page-break-after:always;
  • Example

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: always
    </title>
</head>
<body>
    <p style= "page-break-after:always;">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
    <p style= "page-break-after:always;">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
</body>
</html>


  • avoid: On using this value, page break is avoided whenever possible.
page-break-after:avoid;
  • Example

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: avoid
    </title>
</head>
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
</body>
</html>


  • left: On using this value, page break is inserted such that next page is depicted as the left page.
page-break-after:left;
  • Example

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: left
    </title>
</head>
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
</body>
</html>


  • right: On using this value page break is inserted such that next page is depicted as the left page.
page-break-after:right;
  • Example

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: right
    </title>
</head>
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
</body>
</html>


  • initial : If this value is used then the property will be set to default.
page-break-after:initial;
  • Example

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: initial
    </title>
</head>
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
</body>
</html>


  • inherit : Property is inherited from parent element
page-break-after:inherit;
  • Example

HTML




<!DOCTYPE html>
<html>
<head>
    <title>css_page_break_after</title>
    <style>
        p {
            page-break-after:always;
        }
          
        div{
            page-break-after:default;
        }
          
        #c1{
            page-break-after:left;
        }
          
        #c2{
            page-break-after: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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
    <div>
        <p id="c2">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </div>
    <p id="c1">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p
</body>
</html>


Note: The outcome of page-break-after 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 page-break-after Property are listed below:

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


Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads