DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Im typografischen Sinne ist eine Waise die erste Zeile eines Absatzes, die auf der alten Seite verbleibt, während der Absatz auf der nächsten Seite fortgesetzt wird. Die Eigenschaft orphan steuert die Mindestanzahl von Zeilen eines Absatzes, die auf der alten Seite verbleiben können. Diese Eigenschaft wirkt sich nur auf Paged Media wie print aus.
@media print {
p {
orphans: 3;
}
}Wenn ein Absatz beispielsweise nicht vollständig auf eine Seite passt, wird er dort geteilt, wo es möglich ist. So können einzelne Zeilen eines Absatzes auf einer Seite erscheinen, bevor er auf der nächsten Seite fortgesetzt wird. Dies ist normalerweise unerwünscht, daher verlangen viele Textverarbeitungsprogramme, dass mindestens zwei Zeilen auf einer alten Seite verbleiben, anstatt einer. Sie können entweder eine positive Zahl (wobei 2 der Standard ist) oder inherit angeben.
Beachten Sie, dass die Eigenschaft orphan im Allgemeinen nicht auf Nicht-Paged-Medien wie screen wirkt. Browser, die sowohl orphans als auch columns unterstützen, wenden die vorgesehene Funktionalität jedoch auch auf Spalten an. Außerdem wirkt sich die Eigenschaft nur auf Block-Level-Elemente aus.
widows = Mindestanzahl von Zeilen in einem Absatz, der auf der **neuen** Seite geteilt wird.orphans = Mindestanzahl von Zeilen in einem Absatz, der auf der **alten** Seite geteilt wird.
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 25+ | Keine | Keine | 9.2+ | 8+ | Keine | Keine |
Vielen Dank für die klare Erklärung.
Was ist mit dem anderen Fall von Waisen, wenn ein einzelnes Wort auf einer eigenen Zeile am Ende eines Absatzes steht? Das ist am anstößigsten, wenn es ein kurzes Wort ist, sagen wir, weniger als 6 Buchstaben.
Es gibt Plugins für WordPress, um dies zu tun, aber ich mag es nicht, den Server für etwas zu belasten, das eine geringfügige präsentationsbedingte Anpassung sein sollte.
Was Sie meinen, ist keine Waise. Das nennt man
widowund dafür gibt es auch eine Eigenschaft.Ich weiß, das ist alt, aber ich glaube, ORyan hat den Kontext missverstanden, in dem Christopher seine Frage gestellt hat, und meine Antwort soll die Dinge für alle klären, die nach mir kommen und ORyans Antwort sehen und annehmen, dass sie Christophers Problem lösen wird. Ich glaube, Christopher bezog sich auf Nicht-Druckmedien, aber der Artikel besagt eindeutig, dass er keine "Screen"-Medien betrifft, außer wenn er in Kombination mit CSS-Spalten verwendet wird. Ich glaube, Christopher stellte die Frage außerhalb des Kontexts von Druckmedien, weil ein einzelnes Wort in einer neuen Zeile am Ende eines Absatzes (obwohl es hässlich aussehen und manchmal frustrierend sein kann) ein anderes Problem ist als ein einzelnes Wort, das eine Spalte (oder Seite, in Druckmedien) für sich hat, wo die
widow-Eigenschaft gelten würde. Aber um Ihre Frage, Chris, zu beantworten, das Problem, nach dem Sie gefragt haben, ist nicht das, worum es in diesem Beitrag geht. Es geht hauptsächlich um Druckmedien und darum, zu verhindern, dass Seiten/Spalten am Ende (Waisen) oder am Anfang (Witwen) zu wenig Text haben.Ich habe festgestellt, dass ich Ihre Frage nicht wirklich beantwortet habe, sondern lediglich erklärt habe, dass Ihre Frage für dieses Thema nicht relevant ist. Um Ihre Frage zu beantworten: Ich kenne keine Möglichkeit, dies automatisch (dynamisch) mit einer reinen CSS-Lösung zu handhaben. Wenn der Browser festgestellt hat, dass ein Zeilenumbruch erforderlich ist, bedeutet dies normalerweise, dass auf der vorherigen Zeile nicht genügend Platz für dieses letzte Wort war. Und wenn kein Platz auf der vorherigen Zeile ist, was sonst soll man mit diesem letzten Wort tun? Wenn Sie der Meinung sind, dass die beste Lösung eine Mindestanzahl von Wörtern pro Zeile ist, dann müssten Sie JavaScript verwenden, um dies zu ermitteln und nach dem Rendern des Textes sowie bei jeder Größenänderung des Viewports zu korrigieren.
Schade, dass Safari und Firefox das nicht unterstützen!
Ich wünschte, dies wäre kein Bild, das ich gerne bearbeiten würde, nachdem ich recherchiert habe. Aber danke dafür, es war erhellend.
Gibt es eine Möglichkeit, verwaiste Überschriften zu handhaben? In meinem Anwendungsfall habe ich eine Überschrift, die mit dem Text gruppiert werden muss. Die Eigenschaften
orphansundwidowsfunktionieren mit dem Text, aber ich habe "baumelnde" Überschriften, die zu Waisen werden, wenn der nachfolgende Text in die nächste Spalte umbricht. Gibt es eine andere Möglichkeit, dies zu handhaben und sicherzustellen, dass die Überschrift nicht allein auf der vorherigen Spalte verbleibt und der Text auf der nächsten fortgesetzt wird?Beispiel hier (muss möglicherweise die Fenstergröße des Browsers ändern, um das Problem zu sehen)
http://codepen.io/klappy/pen/LZVePN
Ich habe mein CodePen-Beispiel aktualisiert, um zu zeigen, was ich schließlich versucht habe. Ich habe die Überschrift und den ersten Absatz mit einem Div umschlossen und "break-inside: avoid;" verwendet, um ein Umbrechen zu verhindern. Wenn jemand eine bessere Methode kennt, bitte mitteilen.
http://codepen.io/klappy/pen/LZVePN
Es ist ein Jahr her, aber ich dachte, ich würde Klappys Frage beantworten: Setzen Sie bei der Überschrift
page-break-after: avoidDie
<h2>sollte immer mit dem Text sitzen.