CSS - salto de página dentro

Descripción

La propiedad page-break-inside indica si se deben permitir los saltos de página dentro del cuadro de un elemento.

El valor de esta propiedad no es el único factor para determinar si un salto de página debe seguir al elemento. Esta decisión también se verá afectada por los valores de page-break-before y page-break-after para cualquier elemento descendiente.

Valores posibles

avoid - No se debe colocar ningún salto de página dentro de la caja del elemento si es posible.
auto - Los saltos de página no deben forzarse ni evitarse dentro de la caja del elemento.

Se aplica a

Todos los elementos a nivel de bloque.

Ejemplo

Aquí está el ejemplo:

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

Producirá el siguiente resultado:

Para obtener más detalles, consulte CSS Paged Media .

↰ Previous page