CSS | propiedad page-break-after

La propiedad page-break-after en CSS se usa para agregar un salto de página después del elemento indicado.

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-after no se puede utilizar en elementos absolutamente posicionados o en un elemento <div> vacío.

Sintaxis :

page-break-after: auto|always|avoid|left|right|initial|inherit;

Valor por defecto: Su valor por defecto es automático.

Valores de propiedad :

auto : este valor se refiere al salto de página automático.

page-break-after:auto;

Ejemplo :

<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: auto
    </title>
</head>
  
<body>
  
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
  Text credits: https://en.wikipedia.org/wiki/Paragraph
</body>
</html>                    

siempre: al usar este valor, el salto de página se inserta después del cuadro de elemento especificado siempre.

page-break-after:always;

Ejemplo :

<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: always
    </title>
</head>
  
<body>
    <p style= "page-break-after:always;">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
      
    <p style= "page-break-after:always;">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
      
    Text credits : https://en.wikipedia.org/wiki/Paragraph
</body>
</html>                    

evitar: al usar este valor, se evita el salto de página siempre que sea posible.

page-break-after:avoid;

Ejemplo :

<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: avoid
    </title>
</head>
  
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
      
    Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>                    

izquierda: al usar este valor, se inserta un salto de página de modo que la página siguiente se represente como la página izquierda.

page-break-after:left;

Ejemplo :

<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: left
    </title>
</head>
  
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
      
    Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>                    

derecha: al usar este valor, se inserta un salto de página de modo que la siguiente página se represente como la página izquierda.

page-break-after:right;

Ejemplo :

<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: right
    </title>
</head>
  
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
      
    Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>                    

initial : si se utiliza este valor, la propiedad se establecerá como predeterminada.

page-break-after:initial;

Ejemplo :

<!DOCTYPE html>
<html>
<head>
    <title>
        page-break-after: initial
    </title>
</head>
  
<body>
    <p style= "page-break-after: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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </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. The first way to divide sentences
        into groups was the original paragraphos, 
        similar to an underscore at the beginning of
        the new group.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
      
    Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>                    

heredar: la propiedad se hereda del elemento principal

page-break-after:inherit;

Ejemplo :

<!DOCTYPE html>
<html>
<head>
    <title>css_page_break_after</title>
    <style>
        p {
            page-break-after:always;
        }
          
        div{
            page-break-after:default;
        }
          
        #c1{
            page-break-after:left;
        }
          
        #c2{
            page-break-after: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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p>
    <div>
        <p id="c2">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </div>
      
    <p id="c1">
        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.[2] The Greek paragraphos 
        evolved into the pilcrow, which in English 
        manuscripts in the Middle Ages can be seen 
        inserted inline between sentences. The hedera 
        leaf (e.g. ?) has also been used in the same way.
    </p> 
      
    Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>                    

Nota : el resultado de la propiedad page-break-after 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 la propiedad page-break-after se enumeran a continuación:

Google Chrome
explorador de Internet
Firefox
Ópera
Safari

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta