Propiedad CSS page-break-inside

La propiedad page-break-inside controla si se produce un salto de página dentro de un elemento. Esta propiedad se utiliza generalmente para gestionar los saltos de página dentro del contenido de un elemento al imprimir. Tenga en cuenta que solo se aplica a contextos de medios paginados y no tiene efecto en la representación en pantalla.

WARNING

La propiedad page-break-inside ha sido reemplazada por la propiedad break-inside. Las alternativas modernas incluyen avoid-page y avoid-column para un control más fino de los saltos de página y de columna.

Los navegadores tratan la propiedad page-break-inside como un alias de break-inside. Esto garantiza que los sitios que utilizan la propiedad page-break-inside sigan funcionando según lo diseñado.

Valor inicial	auto
Se aplica a	Elementos de nivel de bloque.
Heredable	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	`object.style.pageBreakInside = "avoid";`

Sintaxis

Sintaxis de CSS page-break-inside

css

page-break-inside: auto | avoid | initial | inherit;

El siguiente ejemplo de código muestra el uso de la propiedad page-break-inside:

Código de CSS page-break-inside

css

@media print {
  p {
    page-break-inside: auto;
  }
}

Ejemplo de la propiedad `page-break-inside` con el valor `avoid`:

Las partes separadas de la página

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 90px;
        width: 200px;
        columns: 1;
        column-width: 80px;
      }
      .list,
      ol,
      ul,
      p {
        page-break-inside: avoid;
      }
      p {
        background-color: #8ebf42;
      }
      ol,
      ul,
      .list {
        margin: 0.5em 0;
        display: block;
        background-color: #1c87c9;
      }
      p:first-child {
        margin-top: 1em;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>The first paragraph.</p>
      <section class="list">
        <span>A list</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>The second paragraph.</p>
      <p>The third paragraph, it contains more text.</p>
      <p>The fourth paragraph. It has a little bit more text than the third one.</p>
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad `page-break-inside` con el valor `auto`:

Ejemplo de la propiedad page-break-inside con el valor "auto":

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 90px;
        width: 200px;
        columns: 1;
        column-width: 80px;
      }
      .list,
      ol,
      ul,
      p {
        page-break-inside: auto;
      }
      p {
        background-color: #8ebf42;
      }
      ol,
      ul,
      .list {
        margin: 0.5em 0;
        display: block;
        background-color: #1c87c9;
      }
      p:first-child {
        margin-top: 1em;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>The first paragraph.</p>
      <section class="list">
        <span>A list</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>The second paragraph.</p>
      <p>The third paragraph, it contains more text.</p>
      <p>The fourth paragraph. It has a little bit more text than the third one.</p>
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
auto	Permite saltos de página dentro del elemento.
avoid	Evita saltos de página dentro del elemento.

Practice

¿Qué hace la propiedad CSS 'page-break-inside'?

Ajusta el comportamiento del salto de página dentro de un contenedor.Declara cómo romper las líneas de texto dentro de un contenedor.Se utiliza para forzar un salto de página después de un elemento HTML.Se utiliza para evitar que se produzca un salto dentro de un elemento.Añade un borde dentro del elemento.

Propiedad CSS page-break-inside ​

Sintaxis ​

Ejemplo de la propiedad page-break-inside con el valor avoid: ​

Ejemplo de la propiedad page-break-inside con el valor auto: ​