当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。