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