page-break-inside

优质

小牛编辑

125浏览

2023-12-01

描述 (Description)

page-break-inside属性指示是否应该在元素的框中允许分页符。

此属性的值不是确定分页符是否应遵循该元素的唯一因素。此决定还将受到任何后代元素的page-break-before和page-break-after的值的影响。

可能的值 (Possible Values)

avoid - 如果可能的话，不应在元素框内放置分页符。
auto - 在元素框内既不强制也不阻止分页符。

适用于 (Applies to)

所有块级元素。

例子 (Example)

这是一个例子 -

<html>
   <head>
      <style type = "text/css">
         .example {
            -webkit-columns: 150px;
            -moz-columns: 150px;
            columns: 150px;
            -webkit-column-gap: 2em;
            -moz-column-gap: 2em;
            column-gap: 2em;  
         }
         body {
            font-size: 12px;
            font-family: 'Georgia', serif;
            font-weight: 400;
            line-height: 1.45;
            color: #333;
            background: #ecf0f1;
            padding: 1em;
         }
         li {
            background: white;
            padding: 1em;
            margin-bottom: 1.3em;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
         }
      </style>
   </head>
   <body>
      <ul class = "example">
         <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
         <li>Mauris eu risus.</li>
         <li>Vestibulum auctor dapibus neque.</li>
         <li>Consectetuer adipiscing elit.</li>
         <li>Eu risus.</li>
         <li>Vestibulum auctor dapibus neque.</li> 
         <li>Lorem ipsum dolor sit amet</li>
         <li>Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
         <li>Vestibulum auctor dapibus neque.</li>
      </ul> 
      <button onclick = "myFunction()">Print this page</button>
      <script>
         function myFunction() {
            window.print();
         }
      </script>
   </body>
</html>

有关更多详细信息，请查看CSS分页媒体。