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:
Wie kann ich tun? Ich benutze "Waisen: 3" CSS mit Absätzen und arbeitet mit "p" -Tags, aber mit h1 oder h2 funktionieren nicht.
%Vor%Vollständiges Beispiel für eine Aktion wo:
- 1-2 Seite: Absätze verwaiste funktioniert gut.
- 2-3 Seite: Header funktioniert nicht.
Anforderungen:
- HTML hat einen Hauptcontainer.
- HTML nicht ändern .
- Browser-Unterstützung ist nicht wichtig (auf meine spezifische Arbeit).
- Ich brauche einen Trick in CSS (kein JS oder Jquery, vorzugsweise)
- Ich kann den page-break-before nicht verwenden: immer, weil ich möchte, dass die Header nur zur nächsten Seite gehen, wenn sie unten auf der Seite erscheint.
1 Antwort
In der Typografie ist ein Waisenkind:
Eine Absatz-öffnende Zeile, die am unteren Rand einer Seite oder Spalte erscheint und somit vom Rest des Textes getrennt ist.
In HTML <h1> und <p> sind jedoch verschiedene Absätze . Sie müssen also break-after property verwenden, um der Layout-Engine mitzuteilen, dass nach diesem Absatz kein Seitenumbruch eingefügt werden soll (mit der Nebeneffekt, um den nächsten Absatz auf die vorherige Seite zu verschieben - wenn es passt - oder den Header auf die nächste Seite zu verschieben.
Hinweis zur Kompatibilität: break-after setting ist ein true funktionierender Entwurf und selbst grundlegende Funktionen werden nicht umfassend unterstützt (insbesondere Internet Explorer 10 tut ). Um dies zu umgehen, können Sie eine andere Eigenschaft mit ähnlicher Bedeutung verwenden:
Beachten Sie, dass page-break-after sowohl für die Seite als auch für die Spalten gilt. page-break-after wird nicht gut von FF unterstützt ( es ist ein Fehler ), wenn Kompatibilität wichtig ist und Der Absatz erstreckt sich nicht über mehrere Seiten. Sie können die Umgehung von <h1> und <p> in einem Container umgehen (sagen wir <section> ) und dann page-break-inside wie folgt anwenden:
IMO sollten Sie page-break-after und page-break-inside mit page-break-inside mit -moz Präfix kombinieren, bis der Fehler behoben ist.
Tags und Links html css css-paged-media