page-break-after/page-break-after-Eigenschaft für div Elemente

Question

Meine html diese Art von Struktur ist mit:

<div> 
    <div class="pagebr">content1</div> 
    <div class="pagebr">content2</div> 
    <div class="pagebr">content3</div> 
    <div class="pagebr">content4</div> 
    <div class="pagebr">content5</div> 
    <div class="pagebr">content6</div> 
    <div class="pagebr">content7</div> 
</div> 

Alle inneren Div Elemente kommen dynamisch. Manchmal wird es ein oder zwei div oder alle sein. Es ist nicht behoben. Aber insgesamt sind 7. Wenn ich Klasse schreiben -

div.pagebr 
{ 
    page-break-after:always; 
} 

Jeden div Umzug zur nächsten neuen Seite zu schaffen leeren Raum nach div Elemente. page-break-before:always; macht das gleiche und page-break-after:auto; funktioniert nicht mehr.

Wie sollte ich eine Klasse für die Div-Elemente hinzufügen, so dass sie auf jeder Seite angepasst werden können, ohne zu brechen? Oder gibt es eine alternative Lösung?

Jede Hilfe wird geschätzt. Danke.

Answer 1

Seiteninhalt kann bei dynamischen Elementen nicht in eine Seite eingefügt werden. Wenn Sie Seitenumbruch in Ihrem div vermeiden möchten, können Sie page-break-inside:avoid; angeben, wie folgendes Beispiel

div.pagebr 
 
{ 
 
    page-break-inside:avoid; 
 
}

<div> 
 
    <div class="pagebr">content1</div> 
 
    <div class="pagebr">content2</div> 
 
    <div class="pagebr">content3</div> 
 
    <div class="pagebr">content4</div> 
 
    <div class="pagebr">content5</div> 
 
    <div class="pagebr">content6</div> 
 
    <div class="pagebr">content7</div> 
 
</div>

Alternative Art und Weise

Wenn Sie 3 div s innerhalb einer Seite, dann könnten Sie gehen mit der folgenden Lösung

Um eine Seite braek in jedem 3 Div haben Sie Selektorverwendengeben page-break-after: always;

div.pagebr:nth-child(3n) { 
 
    page-break-after: always; 
 
}

<div> 
 
    <div class="pagebr">content1</div> 
 
    <div class="pagebr">content2</div> 
 
    <div class="pagebr">content3</div> 
 
    <div class="pagebr">content4</div> 
 
    <div class="pagebr">content5</div> 
 
    <div class="pagebr">content6</div> 
 
    <div class="pagebr">content7</div> 
 
</div>

über mehr über mehr Details wissen page-break durch this und this Links