CSS page-break-before Property

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.



Syntax:

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

Values:

  • auto : Refers to automatic page-break.
    page-break-before: auto;
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • always: Page break is inserted after specified element box always.
    page-break-before:always;
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • avoid: Page break is avoided whenever possible.
    page-break-before:avoid;
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • left: Page break is inserted such that next page is depicted as the left page.
    page-break-before:left;
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • right: Page break is inserted such that next page is depicted as the right page.
    page-break-before:right;
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • initial: Property is set to default
    page-break-before:initial
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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
  • 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.



Improved By : shubham_singh