CSS - saut de page à l'intérieur

La description

La propriété page-break-inside indique si les sauts de page doivent être autorisés dans la zone d'un élément.

La valeur de cette propriété n'est pas le seul facteur pour déterminer si un saut de page doit suivre l'élément. Cette décision sera également affectée par les valeurs de page-break-before et page-break-after pour tout élément descendant.

Valeurs possibles

  • avoid - Aucun saut de page ne doit être placé dans la boîte de l'élément si possible.

  • auto - Les sauts de page ne doivent être ni forcés ni empêchés à l'intérieur de la boîte de l'élément.

S'applique à

Tous les éléments de niveau bloc.

Exemple

Voici l'exemple -

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

Il produira le résultat suivant -

Pour plus de détails, veuillez consulter les médias paginés CSS .