CSS | page-break-after Property

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;

Property values:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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 are listed below:

  • Goolge Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.