CSS-Break-After-Eigenschaft: Vollständige Anleitung, Verwendung und Unterstützung

Home » Python » CSS-Break-After-Eigenschaft: Vollständige Anleitung, Verwendung und Unterstützung

Wenn Sie Druckvorlagen, mehrspaltige oder fragmentierte Texte erstellen, müssen Sie die Zeit oder den Druck so lange wie möglich aufgeben, um zu vermeiden, dass Sie auf die nächste Seite oder Spalte wechseln. Ahi, es ist nicht im Spiel la propiedad CSS break-afterEine Maschine, die darauf hinweist, dass der Navigator nach einem Element ein Salto erzeugen muss.

Mehr als alle Druck-Tipps für den Fall, Break-After ist in folgenden Veröffentlichungen nützlich: digitale Zeitschriften mit Kolumnen, Informationen im PDF-Format, Dokumente mit Seiten und Seiten und schneller Fortschritt in den Regionen. Die Kraft, die Sie haben können, ist, Salzstöße zuzulassen oder zu behindern Siehe Kontext: Druckseiten, Kolumnen oder Regionen.

Es handelt sich um eine CSS-Break-After-Eigenschaft

Die Eigenschaft break-after Definieren Sie, ob eine Seite, eine Spalte oder eine Region unmittelbar nach dem Element erstellt werden soll, das Sie anwenden möchten. Dicho de forma llana, Markieren Sie einen kurzen Punkt, der nur die Komponente betrifft, von der Art, dass der Inhalt später in der aktuellen „Unidad“ der Fragmentierung (Seite, Spalte oder Region) steht, liegt er nur an dem Ort, an dem er vom Navigator erstellt wurde.

Historisch gesehen ist CSS 2.1 verfügbar page-break-after para medios paginados. Hoy, Break-After ist dieses Konzept Um auch mit mehreren Spalten und Regionen zu funktionieren, müssen Sie außerdem die Kompatibilität mit den wertvollen Klassikern gewährleisten, die im Druck verwendet werden.

Sintaxis, Werte und wie sie interpretiert werden

Die grundlegende Form der Nutzung lautet direkt: break-after: <valor>. Diese wertvollen Inhalte enthalten allgemeine und spezifische Seiten-, Kolumnen- und Regionenkontexte:

break-after: auto | avoid | always | all |
             avoid-page | page | left | right | recto | verso |
             avoid-column | column |
             avoid-region | region

Generische Werte (gültig im aktuellen Kontext): auto (ni fuerza ni prohíbe un salto), avoid (intenta evitarlo), always (für einen Salto im unmittelbaren Fragmentierungskontext) y all (experimentell, für den gesamten Kontext der Fragmentierung: als Beispiel, Spalte und Seite nach Bedarf).

Werte für mittlere Seiten: avoid-page (evita salto de página), page (fuerza salto de página), left y right (Führen Sie einen oder mehrere Schritte aus, um sicherzustellen, dass der entsprechende Inhalt auf die entsprechende Seite kommt bzw. heruntergeladen wird.) Además, recto y verso Sohn wertvoller experimenteller que Obligan a que la siguiente page see recto or verso según el flujo del idioma.

Werte für mehrspaltiges Design: avoid-column evita un salto de columna y column lo fuerza. In umfangreichen Inhalten, geteilt durch verschiedene Kolumnen, Estos valores son clave para no cortar piezas delicadas (wie ein Codefragment) oder für lineare Blöcke an der Spitze der nächsten Spalte.

Valores para regiones: avoid-region y region Kontrollieren Sie die Verteilung zwischen definierten Bereichen durch CSS-Regionen. Dies ist eine konkrete Spezifikation Ihrer Zugkraft in Ihrem Moment, Der tatsächliche Support der Regionen ist begrenzt Unter modernen Schiffen ist es wichtig, dass Sie Ihre Verwendung als Experimentelles oder Legados in Betracht ziehen.

Reglas de navegador de entscheidung: forzar, evitar y prioridades

An jedem Punkt, an dem eine Drehung (die „Grenze“ zwischen Elementen) erfolgen muss, bewertet der Navigator drei Eigenschaften: el break-after del elemento anteriorist die break-before del siguiente y el break-inside del contenedor. Es ist die Interaktion zwischen drei, die das Ergebnis bestimmt.

Der vereinfachte Algorithmus funktioniert wie folgt: Es werden keine spezifischen Eigenschaften angegeben valor forzado (always, left, right, page, column, region), dieser Wert hat Vorrang. Si hay varios forzados, Gana, dass es im Flujo mehr „Adelante“ ist: break-before > break-after > break-inside.

Wenn Sie in dieser Gegend sind, werden Sie nichts finden valor de evitar (avoid, avoid-page, avoid-column, avoid-region), nicht auf den entsprechenden Salto angewendet. Nach der Lösung der Saltos Forzados kann der Navigator „Saltos Suaves“ hinzufügen, wenn dies erforderlich ist. Aber jetzt gibt es nur begrenzte Markierungen, um den Wert zu vermeiden.

Beziehung zu page-break-after und historischer Kompatibilität

Aus Gründen der Kompatibilität traten die Navigatoren in Aktion page-break-after como un alias de break-after Auf mittleren Seiten. Dies stellt sicher, dass Antiquitäten verwendet werden, um das klassische Eigentum so zu gestalten, dass es funktioniert.

Die gleichwertigen Wertefunktionen der folgenden Vorgehensweise: auto → auto, always → page, avoid → avoid-page, left → left, right → right. In der Praxis, Sie können Ihre Unterlagen für einen robusten Bürgermeister schreiben en impresión:

.elemento {
  page-break-after: always; /* fallback histórico */
  break-after: page;        /* estándar actual */
}

Es gibt auch page-break-before Mit der misma filosofía en el „lado anterior“ del elemento. Verwenden Sie vor oder nach dem genauen Punkt, bevor Sie das Haus verlassen en tu maquetación.

Umfang der Anwendung und des visuellen Komforts

La propiedad se aplica a cajas de nivel de bloque im normalen Alltag, für moderne Erweiterungen, Artikel von grid, ítems de flex, Gruppen von Filas de Tablas und Filas de Tabla. No se hereda, su valor inicial is auto y Ihr Animationstyp ist diskret (Es wird gesagt, dass keine Interpolation auf Transiciones erfolgt).

Sobald Sie eine Seite oder eine kurze Spalte finden, Die Margen, die Ränder und die Polsterung werden nicht auf dem Punkt der Straße angezeigt. Die einzige Ausnahme besteht darin, dass der Spielraum sofort nach einem Salto erzwungen wird und somit erhalten bleibt. Dies ist eine detaillierte Anleitung, um den visuellen Raum durch eine ausgedrückte Salto zu korrigieren.

Praktische Anwendungsbeispiele

Impressum (Inhaltsverzeichnis, das auf der Seite endet): Wenn Sie nach dem Inhaltsverzeichnis auf einer neuen Seite suchen, können Sie die nächste Seite erneut aufrufen @media print. Es handelt sich um eine typische Situation in Büchern oder Informationen darüber Interesa trennt klaramente secciones clave:

@media print {
  #tabla-de-contenidos {
    break-after: always;
  }
}

Impressum mit der folgenden Seite: In doppelter Veröffentlichung kann es erforderlich sein, dass der nächste Kapitel auf einer der folgenden Seiten beginnt. Para hallo, utiliza el valor right:

@media print {
  #tabla-de-contenidos {
    break-after: right;
  }
}

Mehrspaltig: Stellen Sie sich einen Hauptinhalt vor, der alle Spalten belegt (column-span: all) und Unterabschnitte, die in einer Säulenkabine alinear sein müssen. Aplica break-after: column en el bloque previo (por ejemplo, en un <p> o en cada <section>) para forzar el salto de columns:

main {
  column-width: 200px;
}
h1 {
  column-span: all;
}
section {
  break-after: column; /* cada sección empieza arriba de la siguiente columna */
}

Vermeiden Sie Saltos durch Tabellenfilas: Wenn Sie eine Tabelle auf der anderen Seite benötigen, sobald dies möglich ist, dann break-after: avoid en las filas. In gedruckten Dokumenten geht es darum, die Zeit auf der Seite einer Tabelle zu verkürzen:

tr {
  break-after: avoid;
}

Vermeiden Sie es, ein in den Kolumnen zerbrochenes Fragment zu lesen: Eine Codeblockierung, bei der keine Fragen zu den Kolumnen gestellt werden können break-after: column en el elemento anterior o manejarlo con break-inside: avoid-column dentro del propio bloque, según el caso:

.articulo {
  column-width: 12em; /* activa multicolumnas */
}
.articulo .code-snippet {
  break-after: column; /* tras el snippet, siguiente columna */
}

Regionen: Wenn Sie mit Flüssen in Regionen arbeiten (begrenzte Unterstützung), können Sie angeben, dass eine Liste mit Terminen in einer Region vorliegt und dass der Rest in der Nähe verfügbar ist. Aunque no es lo más común hoy, Sirve como referencia de como se pensó la propiedad en ese contexto:

.region ul {
  break-after: region;
}

Bedingte Anpassung: Sie möchten, dass das Comportamiento vuelva a auto um eine aggressive Fragmentierung zu vermeiden, Sie können auf Medienanfragen zugreifen:

@media screen and (max-width: 768px) {
  h2 {
    break-after: auto;
  }
}

Dies ist eine Kombination aus Pause-vorher, Pause-nachher und Pause-innen

Dies sind drei wirksame Maßnahmen. Es ist gewohnheitsmäßig, zum Beispiel, usar break-inside: avoid en un componente para que no se rompa por dentro, mientras que una cabecera siguiente deklarieren break-before: page Zur Bearbeitung auf einer neuen Seite. Si el „before“ pide un salto, Bevorzugen Sie vorher das „Nachher“..

Die Priorität Ihres Kommentars ist wichtig: break-before gana a break-after, que a su vez gana a break-inside. Wenn es verschiedene Arten von Stramplern gibt, wenden Sie sich an das Element, das Sie später im Dokumentenfluss finden.

Kompatibilität und Kontextunterstützung

Die Unterstützung von break-after abhängig vom Kontext. In Paginierung/Druck, Moderne Navigationsgeräte müssen eine größere Form annehmen, y el alias page-break-after Mantiene die Retrokompatibilität von Antiguos-Standorten.

En multicolumnas, el valor column ist in modernen Motoren verfügbar; Allerdings haben auf WebKit basierende Browser das Prefijo koexistiert -webkit-column-break-after como alternativea no estándar. Wenn Sie sich an ein öffentliches Amt wenden, werden Sie wahrscheinlich aufgefordert, fortzufahren, einschließlich des Antwortpräfis para columnas.

Für Regionen ist das Panorama sehr unregelmäßig: CSS-Regionen wurden nicht in allgemeiner Form eingeführt, por lo que los valores region y avoid-region Denken Sie daran, Experimente oder Legados in Betracht zu ziehen.

Ein historischer Höhepunkt: Er wurde auf der ganzen Welt demonstriert IE10+ enthält mehrere Spalten mit Break-After Mientras que navegadores WebKit pedían el prefijo -webkit-column-break-after, und Firefox erscheint in diesem Kontext. Ich habe den Support sehr gut angenommen, aber es ist eine gute Idee, drei Entornos (Drucke, Kolumnen und Regionen) mit den Zielen des Navigators zu vergleichen.

Gute praktische Übungen mit Pause danach

• Verwenden Sie es in Maßen: Ein „Siempre Salta“ durch alle Blockgattungen, leere Räume und Maquetaciones bis hin zu Flüssigkeiten. Empléalo solo donde aporte claridad.
• Evitar con criterio: abusar de avoid Sie können in anderen Teilen des Dokuments einige Nachteile hervorrufen. Combínalo con break-inside Cuando quieras schützt eine Komponente.
• Überprüfen Sie die Navigationsgeräte und Geräte: Drucken Sie ein PDF aus, um eine Vorschau auf den Druck zu erhalten und mehrere Spalten zu testen. Das Verhalten kann je nach Motor und Kontext variieren.
• Medienabfragen mit Kopf: Es gab Fragmentierungsentscheidungen, die auf Papier gehalten wurden, aber nicht in Bewegung waren; ajusta con @media wenn nötig.

Technische Details und Spezifikationen

Zusammenfassung des Modells der Immobilie: Anfangswert auto, no heredada, valor computado „tal cual“ se epecifica y tipo de animación discreto. Da die Verwendung dieses Typs keine Animationen impliziert, wird deutlich, dass es in den Corte-Stadien keinen schrittweisen Übergang gibt.

Während sie durch einen Salto, die Grenzen, Rellenos und Margenes geteilt wurden, ließen sie sich nicht am Punkt der Drehung „repiten“. Sie erhalten den Margen sofort nach einem Salto Forzado, Dies ist nützlich, um die Inhaltstrennung zu verwalten, die auf der neuen Seite oder Spalte arrangiert wird.

Patrones habituales y trucos (con contexto histórico)

In Zeiten unregelmäßiger Unterstützung wird ein Trick populär gemacht: Geben Sie einen ein DIV vacío con   und ordnen Sie es zu page-break-before/after Um den Salto vor oder nach den tatsächlichen Komponenten zu erzwingen. Am heutigen Tag ist die Lösung nicht „bonita“, aber Sie können Maquetaciones de Legado Donde wiederbeleben page-break-* funciona mejor que break-* en ciertos navegadores antiguos.

Die Truco Solía ​​Escribirse Así (um ein Salto vor einer Tabelle zu provozieren): Erster Teil des DIV mit Salto, dann ein von der Tafel getrennter Parrafo, aus der Art und Weise, wie die Tabelle auf einer neuen Seite im Druck erstellt wird:

<div style="page-break-before: always;">&nbsp;</div>
<p></p>
<table>
  <tr><td>Contenido...</td></tr>
</table>

Wenn Sie mit mehrspaltigen Inhalten im klassischen WebKit arbeiten, wissen Sie, dass dies der Fall ist das alte -webkit-column-break-after Sie können als Salvavidas dienen, zusammen mit der Tapferkeit, zum Beispiel:

figure {
  break-after: column;
  -webkit-column-break-after: always; /* respaldo no estándar */
}

Erweiterte Anwendungsfälle

Doppelter Seitenumbruch: in Büchern und Rezensionen, ab sofort verfügbar Die Kapitel werden auf folgenden Seiten arrangiert. Verwenden Sie dazu right. Wenn Sie den Inhalt in einem Ordner lesen, müssen Sie ihn nicht extra lesen. Wenn nicht, muss der Navigator einen Zusatz hinzufügen, um ihn zu löschen.

Hybride Designs (Seiten mit folgenden Kolumnen): Sie befinden sich in einem mehrspaltigen Abschnitt und befinden sich auf einer Druckseite, der Wert all Sie können den Strampler direkt neben der Spalte wie auf der Seite finden, um sicherzustellen, dass der nächste Block im übergeordneten Kontext lesbar ist. Es ist eine experimentelle Tapferkeit pruébalo con mimo.

Reflujo ordenado de secciones: Wenn es verschiedene Secciones gibt, die in die Cabecera de Columna kommen müssen, anwenden break-after: column a cada sección ayuda a queden „cuadradas“ visualmente, con títulos alineados arriba y sin fragmentos partidos en posiciones incómódas.

Kleine Aufzeichnungen von Aliasnamen und gleichwertigen Werten

Bis heute ist der Druckstil mit vielen Menschen übereinstimmt page-break-after, kann alinearlas con el mundo moderno así sein: page-break-after: always äquivalent zu break-after: page; page-break-after: avoid se mapea a break-after: avoid-page; left y right conservan su significado. Dies ermöglicht die Aktualisierung der fortschreitenden Form.

Für den Fall, dass der Navigator die Familie nicht vollständig umsetzt break-* en un contexto concreto, Den klassischen Alias ​​als „Fallback“ verwalten Es handelt sich dabei um eine intelligente Bewegung, die ich in Projekten mit Anwendern verfolge, die ich mit vielen verschiedenen Navigationsgeräten ausdrucke.

Häufige Fehler und wie man sie vermeidet

Platzieren break-after: always im Übermaß Provozieren Sie Seiten oder Kolumnen zur Halbzeit. Bevor du forzarst, valora si avoid o auto Du hast ein natürliches, akzeptables Corte gefunden.

Ignorar la interacción con break-inside Es ist der andere Fall, der zur Gewohnheit wird. Wenn eine Komponente nicht geteilt werden muss, addieren break-inside: avoid (o avoid-page/avoid-column) Außerdem kann man „nachher“ oder „vorher“ in benachbarten Elementen verwenden.

Im eigentlichen Kontext gibt es nicht den klassischen Satz: Die Vorschau auf den ersten Eindruck ist nicht gegeben Als nächstes käme das PDF zum Buchdrucker. Generieren Sie ein PDF, überarbeiten Sie die Seiten und prüfen Sie, welche Salze den Kuchen und die Kekse enthalten.

Ficha rápida de la propiedad

• Initiale: auto
• Gilt für: Blockkästen, Gitterelemente, flexible Elemente, Gruppen von Filas de Tabla und Filas
• Vererbt: nicht
• Valor computado: tal cual se especifica
• Tipo de animación: diskret

Letztendlich recuerda que algunos valores (all, recto, verso) werden als experimentelle Markierungen in den Borradoren der Spezifikation angezeigt. Es gibt einige Implementierungen, Ihre Strategie muss Prüfungen und „Fallbacks“ umfassen. cuando dependas de ellos.

Dominieren break-after Es ist mir gestattet, Dokumente zu erstellen, die gut gedruckt, sortiert und klar vorlesbar sind. A poco que lo verbindet con break-before y break-inside y tengas en cuenta históricos alias y los prefijos de respaldo, Erhalten Sie genaue und vorhersehbare Informationen Es ist nicht möglich, mit leeren Seiten und Blöcken aufzuhören.