CSS-改ページ

説明

_page-break-inside_プロパティは、要素のボックス内で改ページを許可するかどうかを示します。

このプロパティの値は、改ページを要素の後に続けるかどうかを決定する唯一の要因ではありません。この決定は、子孫要素のpage-break-beforeとpage-break-afterの値にも影響されます。

可能な値

avoid -可能な限り、要素のボックス内に改ページを配置しないでください。
auto -要素のボックス内で改ページを強制も防止もしないでください。

に適用されます

すべてのブロックレベル要素。

例

ここに例があります-

<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/css_paged_media [CSSページ付きメディア]をご覧ください。

Css-page-break-inside

目次

CSS-改ページ

説明

可能な値

に適用されます

例