DOM HTML | Estilo pageBreakInside Propiedad

La propiedad Style pageBreakInside se usa para configurar o devolver el comportamiento de salto de página dentro de un elemento en la impresión o vista previa de impresión. La propiedad Style pageBreakInside no afecta a los elementos absolutamente posicionados. 

Sintaxis:

  • Para obtener la propiedad:
object.style.pageBreakInside
  • Para establecer la propiedad:
object.style.pageBreakInside = "auto|avoid|initial|inherit"

Nota: en lugar de esta propiedad, use la propiedad de interrupción porque se reemplaza con la propiedad de interrupción

Valores devueltos: Devuelve un valor de string, que representa el comportamiento de salto de página dentro de un elemento al imprimir

Valores de propiedad :

  • auto: Se utiliza para insertar un salto de página dentro del elemento si es necesario.
  • evitar: Se utiliza para evitar un salto de página dentro de un elemento.
  • initial : se utiliza para establecer esta propiedad en su valor predeterminado.
  • heredar: se utiliza para heredar esta propiedad de su elemento padre.

El siguiente programa ilustra la propiedad Style pageBreakInside: 

Ejemplo: Evitar un salto de página dentro del elemento <p> con id=”footer” 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Style pageBreakInside Property in HTML</title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h2>Style pageBreakInside Property</h2>
    <br>
 
    <p id="myfooter">Geeksforgeeks is a portal for geeks.</p>
 
    <p>For avoiding page break inside footer paragraph,
      double click the "Avoid Page Break" button: </p>
    <br>
 
    <button ondblclick="pagebreak()">Avoid Page Break</button>
 
    <script>
        function pagebreak() {
            document.getElementById("myfooter")
            .style.pageBreakInside = "avoid";
        }
    </script>
 
</body>
 
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Nota: Para ver el resultado, guarde el código en un archivo HTML y ejecútelo en su navegador. La salida se verá cuando vea la VISTA PREVIA DE IMPRESIÓN de ese archivo. 

Navegadores compatibles: El navegador compatible con HTML DOM | Las propiedades de estilo pageBreakInside se enumeran a continuación:

  • Google Chrome 1 y superior
  • Borde 12 y superior
  • Internet Explorer 8 y superior
  • Firefox 19 y superior
  • Ópera 7 y superior
  • Apple Safari 1.3 y superior

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *