Frage Orphan CSS: Wie vermeiden Header (h1, h2 ...) auf der unteren Seite?


Ich habe ein großes HTML-Dokument mit Kopfzeilen (h1, h2, h3 ...) und Absätzen. Wenn ich das Dokument drucke, möchte ich, dass die Kopfzeilen am Ende des Dokuments automatisch zur nächsten Seite gehen:

enter image description here

Wie kann ich? Ich benutze "Waisen: 3" CSS mit Absätzen und arbeitet mit "p" -Tags, aber mit h1 oder h2 funktionieren nicht.

@page {
  size: A4;
}

p {
  orphans:3;
}

h1, h2 {
  orphans:3
}

Vollständiges Beispiel für eine Aktion woher:

  • 1-2 Seite: Absätze verwaiste funktioniert gut.
  • 2-3 Seite: Header funktioniert nicht.

Bedarf:

  • HTML hat einen Hauptdiv-Container.
  • Ändern Sie HTML nicht.
  • Browser-Unterstützung ist nicht wichtig (auf meine spezifische Arbeit).
  • Ich brauche einen Trick in CSS (kein JS oder Jquery, vorzugsweise)
  • Ich kann die Seitenumbruch-Vorher nicht verwenden: immer, weil ich möchte, dass die Kopfzeilen nur zur nächsten Seite gehen, wenn sie am Ende der Seite erscheinen.

10
2018-01-15 10:06


Ursprung


Antworten:


In der Typografie ist ein Waisenkind:

Eine Absatz-öffnende Zeile, die am unteren Ende einer Seite oder Spalte erscheint und somit vom Rest des Textes getrennt ist.

Jedoch in HTML <h1> und <p> sind anders Absätze Was du dann benutzen musst ist break-after Diese Eigenschaft teilt der Layout-Engine mit, dass sie nach diesem Absatz keinen Seitenumbruch einfügen soll (mit dem Nebeneffekt, den nächsten Absatz auf die vorherige Seite zu verschieben - falls es passt - oder die Kopfzeile auf die nächste Seite zu verschieben).

h1, h2 {
    break-after: avoid-page;
}

Hinweis zur Kompatibilität: break-after Einstellung ist a wahr Arbeitsentwurf und sogar grundlegende Funktionen werden nicht allgemein unterstützt (insbesondere Internet Explorer 10 tut). Um dies zu umgehen, können Sie eine andere Eigenschaft mit ähnlicher Bedeutung verwenden:

h1, h2 {
    page-break-after: avoid;
}

Beachten Sie, dass page-break-after gilt für beide Seiten und Spalten. page-break-after wird nicht gut von FF unterstützt (Es ist ein Fehler) Wenn die Kompatibilität wichtig ist und der Absatz sich nicht über mehrere Seiten erstreckt, können Sie die Umgehung umgehen <h1> und <p> in einem Container (sagen wir mal <section>) und dann bewerben page-break-inside so was:

section {
    page-break-inside: avoid;
}

IMO sollten Sie kombinieren page-break-after und page-break-inside verwenden page-break-inside mit -moz Präfix, bis es diesen Fehler beheben wird.


9
2018-01-15 10:46