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;

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">
            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. 
            Outdenting is still used in English typography, though not 
            commonly.[3] Modern English typography usually indicates a 
            new paragraph by indenting the first line. This style can be 
            seen in the (handwritten) United States Constitution from 
            1787. For additional ornamentation, a hedera leaf or other 
            symbol can be added to the inter-paragraph whitespace, or
            put in the indentation space.
            </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. This style is very common in electronic formats, such 
            as on the World Wide Web and email.
        </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.



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.