DOM HTML | Página de estiloBreakBefore Propiedad

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

Sintaxis:

object.style.pageBreakBefore

Valores devueltos: Devuelve una string, que representa el comportamiento de salto de página antes de un elemento al imprimir.

Valores de propiedad :

object.style.pageBreakBefore = “auto | siempre | evitar | string vacía | izquierda | derecho | inicial | heredar»

Valores Descripción:

  • auto : Se utiliza para insertar un salto de página antes del elemento si es necesario.
  • siempre: se utiliza para insertar un salto de página siempre antes del elemento.
  • evitar : Se utiliza para evitar un salto de página antes de un elemento.
  • string vacía: el salto de página no se inserta antes del elemento.
  • left : se utiliza para insertar uno o dos saltos de página antes del elemento, por lo que la página siguiente se considera una página izquierda.
  • right : Se utiliza para insertar uno o dos saltos de página antes del elemento, por lo que la página siguiente se considera una página derecha.
  • 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 pageBreakBefore:

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

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

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 *