CSS-Eigenschaft page-break

Tatsächlich gibt es in der CSS-Spezifikation keine Eigenschaft page-break. Es handelt sich um eine Reihe von drei Eigenschaften: page-break-inside, page-break-before und page-break-after. Diese Eigenschaften definieren das Verhalten des Dokuments beim Drucken.

Page-break-after

Die Eigenschaft page-break-after definiert den Seitenumbruch nach dem Element.

Diese Eigenschaft kann nicht auf ein leeres Tag <div> oder auf absolut positionierte Elemente angewendet werden.

Die Eigenschaft page-break-after wird durch die Eigenschaft break-after ersetzt.

Beispiel

@media print {
footer {page-break-after: left;}
}

Page-break-before

Die Eigenschaft page-break-before definiert den Seitenumbruch vor dem Element.

kann nicht auf ein leeres Tag <div> oder auf absolut positionierte Elemente angewendet werden.

Die Eigenschaft page-break-before wird durch die Eigenschaft break-before ersetzt.

Beispiel

@media print {
h2 { 
page-break-before: right; 
}

Page-break-inside

Die Eigenschaft page-break-inside definiert den Seitenumbruch innerhalb des Elements.

Diese Eigenschaft kann nicht auf ein leeres Tag <div> oder auf absolut positionierte Elemente angewendet werden.

Die Eigenschaft page-break-inside wird durch die Eigenschaft break-inside ersetzt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example{
      background-color: #8ebf42;
      height: 90px;
      width: 200px;
      columns: 1;
      column-width: 80px;
      }
      .list, ol, ul, p {
      break-inside: avoid;
      }
      p {
      background-color: #8ebf42;
      }
      ol, ul, .list {
      margin: 0.5em 0;
      display: block;
      background-color: #1c87c9;
      }
      p:first-child {
      margin-top: 1;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft page-break</h2>
    <div class="example">
      <p>Der erste Absatz.</p>
      <section class="list">
        <span>Liste A</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>Der zweite Absatz.</p>
      <p>Der dritte Absatz mit längerem Text.</p>
      <p>Der vierte Absatz. Es hat ein wenig mehr Text als der dritte.</p>
    </div>
  </body>
</html>

Browser-Support

7.0+


Finden Sie das nützlich?

Ähnliche Artikel