Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: break-before, Kategorien:  (allgemein), Fragmentation (CSS 3), Multi-column Layout (CSS 3)

Umbruch vor einem Block-Element / vor Spaltenanfang

Steuert das Verhalten von Umbrüchen im mehrspaltigen HTML-Elementen oder im Seitenausdruck.

CSS-Eigenschaft: break-before
KurzbeschreibungWerteStandardwertKategorieHinweis
Umbruch vor einem Block-Element / vor Spaltenanfang
  • auto
  • always
  • avoid
  • left
  • right
  • page
  • column
  • avoid-page
  • avoid-column
  • avoid-region
auto
Allgemein:
dispay
CSS 3:
Fragmentation
Multi-column Layout
Neu in CSS 3
 

Verwandte Eigenschaften aus der Kategorie:  (allgemein), Fragmentation (CSS 3), Multi-column Layout (CSS 3):

Folgendes ist beim Einsatz von break-before zu beachten:

  • break-before ist zwar dem Multi-column Layout Module zugeordnet, behandelt jedoch nicht nur den Umbruch in einem mehrspaltigen HTML-Element, sondern generell Umbrüche für den Media Typ paged. paged ist vor allem relevant für den Ausdruck einer Seite.
  • In Bezug auf ein mehrspaltiges HTML-Element sind lediglich die Werte auto, avoid, column und avoid-column einsetzbar. Im Einzelnen haben diese Werte folgende Auswirkung:
    • auto (Standardwert) lässt Umbrüche vor dem Element zu.
    • column erzwingt einen Umbruch vor dem HTML-Element, sodass dieses oben in einer Spalte dargestellt wird. Im Opera sieht dies so aus:
      break-before: column lässt Inhalte in einer neue Spalte beginnen
    • avoid und avoid-column verhindern immer die Darstellung am Anfang einer Spalte. Wäre das Element im Textfluss oben in einer Spalte, wird ein erster Teil des Elements am Ende der vorherigen Spalte dargestellt und bricht dann in die nächste um.
      avoid-column steuert dabei nur die Darstellung im mehrspaltigen Layout, avoid kann sowohl für mehrspaltiges Layout, aber auch in der Druckversion eingesetzt werden.
  • Wird aktuell lediglich vom Opera unterstützt, was nicht ganz erstaunlich ist. Die Eigenschaften page-break-before, page-break-after und page-break-inside werden von Firefox, Sarafi und Google Chrome ebenfalls nicht unterstützt, obwohl sie bereits Eigenschaften des CSS 2.1 Standards sind.
Browserunterstützung von break-before
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16
n
Version: 20
n
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6
n
Version: 10Version: 11Version: 12
nj

Hinweis

Eine umfassender Beitrag zu Multi-column Layout ist bei den Webkrauts zu finden: CSS3 im Praxistest: Multi-column Layout

Weiterführende Informationen zu break-before:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    break-after


Beispiele

HTML:

<div>
   <p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</p>
   <h2>Headline</h2>
   <p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen.</p>
</div>

CSS:

div  {
   border: 1px solid #808080;
   column-count: 3;
   -webkit-column-count: 3;
   -moz-column-count: 3;
}
/* Ausgangsituation. Es wird ein dreispaltiges Element erzeugt. */
p,
h2   {
   margin: 0px;
}
/* Zur eindeutigeren Darstellung werden die Außenabstände der Elemente auf 0 gesetzt. */
Beispiel nur für: FirefoxOperaSafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.

Headline

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen.

 

HTML:

<div>
   <p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</p>
   <h2 class="newColumn">Headline</h2>
   <p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen.</p>
</div>

CSS:

div h2.newColumn  {
   break-before: column;
   -webkit-break-before: column;
   -moz-break-before: column;
}
/* Wird aktuell nur vom Opera unterstützt. Auch die Vendor-Präfixe für die anderen Browser sind ohne Wirkung. */
Beispiel nur für: Opera

Beispiel Nr. 2 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.

Headline

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen.

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.067 sec.

Browser-Marktanteile