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

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

Umbruch im Block-Element (innerhalb von Spalten)

Steuert das Verhalten von Umbrüchen von Block-Elementen innerhalb eines mehrspaltigen HTML-Elements oder im Seitenausdruck.

CSS-Eigenschaft: break-inside
KurzbeschreibungWerteStandardwertKategorieHinweis
Umbruch im Block-Element (innerhalb von Spalten)
  • auto
  • avoid
  • 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-inside zu beachten:

  • break-inside 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 eines Block-Elements in einem mehrspaltigen Layout zu, sodass diese über zwei oder mehrere Spalten angezeigt wird.
    • column entspricht auto und lässt die Darstellung eines Block-Elements über mehrere Spalten zu.
    • avoid und avoid-column verhindern, dass innerhalb eines Block-Elements ein Umbruch stattfindet und damit, dass der Inhalt des Block-Elements über mehrere Spalten verteilt wird.
      Im Opera sieht dies so aus:
      break-inside: avoid-column unterdrückt einen Umbruch in einem Block-Element
      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-inside
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-inside:

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


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>
   <address>Lieschen Müller<br />
   Hohle Gasse 4711<br />
   40000 Verbotene Stadt<br />
   Tel.: 0815 - 123 456<br />
   Fax.: 007 - 987 654
   </address>
   <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>
</div>

CSS:

div  {
   border: 1px solid #808080;
   column-count: 2;
   -moz-column-count: 2;
   -webkit-column-count: 2;
}
/* Ausgangsituation: Hier wird ein zweispaltiges HTML-Element erzeugt. */
p   {
   margin: 0px;
}
/* Abstände werden auf 0 gesetzt. */
address {
   color: blue;
   font-size: 12px;
   padding: 10px;
}
/* Zur Hervorhebung ist der Adressblock kleiner und in blau gesetzt. */
Beispiel nur für: FirefoxInternet Explorer
W3C: 10
OperaSafariGoogle 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.

Lieschen Müller
Hohle Gasse 4711
40000 Verbotene Stadt
Tel.: 0815 - 123 456
Fax.: 007 - 987 654

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.

 

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>
   <address class="ignBreak">Lieschen Müller<br />
   Hohle Gasse 4711<br />
   40000 Verbotene Stadt<br />
   Tel.: 0815 - 123 456<br />
   Fax.: 007 - 987 654
   </address>
   <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>
</div>

CSS:

div .ignBreak  {
   break-inside: avoid-column;
   -moz-break-inside: avoid-column;
   -webkit-break-inside: avoid-column;
}
/* break-inside: avoid-column verhindert den Umbruch innerhalb des Block-Elements.
Auch die Vendor-Präfixe -moz- bzw. -webkit- haben keine erfolgreiche Auswirkung auf Firefox, Sarafi und Chrome. */
Beispiel nur für: Internet Explorer
W3C: 10
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.

Lieschen Müller
Hohle Gasse 4711
40000 Verbotene Stadt
Tel.: 0815 - 123 456
Fax.: 007 - 987 654

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.

 

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: 01. 04. 2017
Render Time: 7.69 sec.

Browser-Marktanteile