La propiedad page-break-before en CSS se usa para agregar un salto de página antes del elemento especificado. Esta propiedad ayuda a definir cómo debe comportarse un documento cuando se imprime. Del mismo modo, page-break-before, page-break-after y page-break-inside, las tres propiedades son fundamentales para determinar y, por lo tanto, definir cómo sería el documento resultante cuando se imprimiera.
Nota: La propiedad page-break-before no se puede utilizar en elementos absolutamente posicionados o en un elemento vacío. Utilice la propiedad break-before en lugar de page-break-before.
Sintaxis:
page-break-before: auto|always|avoid|left|right|initial|inherit;
valores :
- auto : Se refiere al salto de página automático.
page-break-before: auto;
html
<!DOCTYPE html> <html> <head> <title> page-break-before: auto; </title> </head> <body> <p style= "page-break-before:auto;"> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> <p> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> Text credits :https://en.wikipedia.org/wiki/Paragraph </body> </html>
- siempre: el salto de página se inserta después del cuadro de elemento especificado siempre.
page-break-before:always;
html
<!DOCTYPE html> <html> <head> <title> page-break-before: always; </title> </head> <body> <p style= "page-break-before:always;"> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). </p> <p> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> Text credits :https://en.wikipedia.org/wiki/Paragraph </body> </html>
- evitar: el salto de página se evita siempre que sea posible.
page-break-before:avoid;
html
<!DOCTYPE html> <html> <head> <title> page-break-before: avoid; </title> </head> <body> <p style= "page-break-before:avoid;"> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> <p> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> Text credits :https://en.wikipedia.org/wiki/Paragraph </body> </html>
- izquierda: el salto de página se inserta de manera que la siguiente página se represente como la página izquierda.
page-break-before:left;
html
<!DOCTYPE html> <html> <head> <title> page-break-before: left; </title> </head> <body> <p style= "page-break-before:left;"> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> <p> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> Text credits :https://en.wikipedia.org/wiki/Paragraph </body> </html>
- derecha: el salto de página se inserta de manera que la página siguiente se represente como la página derecha.
page-break-before:right;
html
<!DOCTYPE html> <html> <head> <title> page-break-before: right; </title> </head> <body> <p style= "page-break-before:right;"> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> <p> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> Text credits :https://en.wikipedia.org/wiki/Paragraph </body> </html>
- inicial: la propiedad está configurada como predeterminada
page-break-before:initial
html
<!DOCTYPE html> <html> <head> <title> page-break-before:initial; </title> </head> <body> <p style= "page-break-before:initial;"> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> <p> The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. </p> Text credits :https://en.wikipedia.org/wiki/Paragraph </body> </html>
- heredar: la propiedad se hereda del elemento padre
page-break-before:inherit;
html
<!DOCTYPE html>
<html>
<head>
<title>css_page_break_before</title>
<style>
p {
page-break-before:always;
}
div{
page-break-before:default;
}
#c1{
page-break-before:left;
}
#c2{
page-break-before:inherit;
}
</style>
</head>
<body>
<p>
The oldest classical Greek and Latin writing had little or
no space between words and could be written in boustrophedon
(alternating directions). Over time, text direction (left to
right) became standardized, and word dividers and terminal
punctuation became common. The first way to divide sentences
into groups was the original paragraphos, similar to an
underscore at the beginning of the new group.
</p>
<div>
<p id="c2">
Indented paragraphs demonstrated in the US Constitution
In ancient manuscripts, another means to divide sentences
into paragraphs was a line break (newline) followed by an
initial at the beginning of the next paragraph. An initial
is an oversized capital letter, sometimes outdented beyond
the margin of the text. This style can be seen, for example,
in the original Old English manuscript of Beowulf.
</p>
</div>
<p id="c1">
A second common modern English style is to use no indenting,
but add vertical white space to create "block paragraphs." On
a typewriter, a double carriage return produces a blank line
for this purpose; professional typesetters (or word processing
software) may put in an arbitrary vertical space by adjusting
leading.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
Nota: El resultado de la propiedad page-break-before se puede ver mejor al optar por la vista previa de impresión de la página web del código HTML dado. Cree un código similar en su editor de texto como notepad ++ y opte por la vista previa impresa de la página web creada. Pruébelo para una mejor comprensión.
Navegadores compatibles: los navegadores compatibles con CSS page-break-before Property se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari