CSS page-break-before屬性用法及代碼示例

CSS中的page-break-before屬性用於將page-break-before添加到指定的元素。

此屬性有助於定義文檔在打印時的行為。類似地，page-break-before，page-break-after和page-break-inside所有這三個屬性都有助於確定並因此定義在打印時結果文檔的顯示方式。

注意：page-break-before屬性不能用於絕對定位的元素或空元素。

用法:

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

值：

auto:指自動page-break。

page-break-before:auto;

<!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>  
      
    Text credits:https://en.wikipedia.org/wiki/Paragraph  
</body>  
</html>

always:總是在指定的元素框後插入分頁符。

page-break-before:always;

<!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>  
      
    Text credits:https://en.wikipedia.org/wiki/Paragraph  
</body>  
</html>

avoid:盡可能避免分頁符。

page-break-before:avoid;

<!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>  
      
    Text credits:https://en.wikipedia.org/wiki/Paragraph  
</body>  
</html>

left:插入分頁符，以便將下一頁描繪為左頁。

page-break-before:left;

<!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>  
      
    Text credits:https://en.wikipedia.org/wiki/Paragraph  
</body>  
</html>

right:插入分頁符，以便將下一頁顯示為右頁。

page-break-before:right;

<!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>  
      
    Text credits:https://en.wikipedia.org/wiki/Paragraph  
</body>  
</html>

initial:屬性設置為默認

page-break-before:initial

<!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>  
      
    Text credits:https://en.wikipedia.org/wiki/Paragraph  
</body>  
</html>

inherit:屬性是從父元素繼承的

page-break-before:inherit;

<!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>  
      
    Text credits:https://en.wikipedia.org/wiki/Paragraph  
</body>  
</html>

注意：通過選擇給定HTML代碼的網頁的打印預覽，可以最佳地查看page-break-before屬性的結果。在您的文本編輯器(如notepad ++)上創建類似的代碼，然後選擇對創建的網頁進行打印預覽。請嘗試以更好地理解它。

支持的瀏覽器：CSS page-break-before屬性支持的瀏覽器如下所示：

穀歌瀏覽器
IE瀏覽器
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自Lavisha大神的英文原創作品 CSS page-break-before Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。