Umgang mit Inhaltsumbrüchen im Mehrspaltenlayout

Grundlagen der Fragmentierung

Das CSS-Fragmentierungsmodul liefert Details darüber, wie Inhalte zwischen den Fragmentierungscontainenern oder Fragmentaineren brechen. Das Mehrspaltenlayout Modul definiert hingegen die break-after, break-before und break-inside Eigenschaften, die eine gewisse Kontrolle innerhalb und zwischen den Spalten bieten. In einem Mehrspaltenlayout ist ein Spaltenkasten ein Fragmentierungscontainer.

Ein Spaltenkasten kann andere Markups enthalten, und es gibt viele Stellen, an denen ein Umbruch nicht ideal wäre. Beispielsweise würden wir im Allgemeinen bevorzugen, dass die Bildunterschrift eines Bildes nicht in eine neue Spalte von dem Bild, auf das sie sich bezieht, verschoben wird. Auch das Beenden einer Spalte mit einer Überschrift sieht merkwürdig aus. Die Multicol-Fragmentierungseigenschaften bieten uns Möglichkeiten, um dies zu steuern.

Es gibt verschiedene Orte, an denen wir unsere Umbrüche kontrollieren möchten:

• Umbrüche in Boxen, beispielsweise innerhalb eines figure-Elements.
• Umbrüche vor und nach Boxen, was unser Beispiel mit der Überschrift oben einschließen würde.
• Umbrüche zwischen Zeilen.

Umbrüche in Boxen

Um Umbrüche in Boxen zu steuern, verwenden Sie die break-inside Eigenschaft. Diese Eigenschaft nimmt die Werte an:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

Im folgenden Beispiel haben wir break-inside auf das figure-Element angewendet, um zu verhindern, dass die Bildunterschrift von dem Bild getrennt wird.

<div class="container">
  <figure>
    <img
      alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
    <figcaption>Balloons</figcaption>
  </figure>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

img {
  max-width: 100%;
}
figure {
  margin: 0;
  break-inside: avoid;
}
figcaption {
  font-weight: bold;
  border-bottom: 2px solid #999999;
}
.container {
  column-width: 200px;
}

Umbrüche vor und nach Boxen

Die Eigenschaften break-before und break-after werden verwendet, um Umbrüche vor und nach Elementen zu steuern. Sie nehmen im Mehrspaltenkontext die folgenden Werte an:

• auto
• avoid
• avoid-column
• column

Im nächsten Beispiel erzwingen wir einen Spaltenumbruch vor einem h2-Element.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon.
  </p>
  <h2>My heading</h2>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
}

h2 {
  break-before: column;
}

Umbrüche zwischen Zeilen

Die zum CSS-Fragmentierungsmodul gehörenden Eigenschaften orphans und widows sind ebenfalls nützlich und erwähnenswert. Die Eigenschaft orphans steuert die Anzahl der Zeilen, die am Ende eines Fragments alleine stehen. Die Eigenschaft widows steuert die Anzahl, die zu Beginn eines Fragments alleine stehen.

Die Eigenschaften orphans und widows nehmen einen <integer> als Wert, der die Anzahl der Zeilen darstellt, die am Ende bzw. am Anfang eines Fragments zusammengehalten werden sollen. Beachten Sie, dass diese Eigenschaften nur innerhalb eines Blockcontainers wie einem Absatz funktionieren. Wenn der Block weniger Zeilen enthält als die Zahl, die Sie als Wert angeben, werden alle Zeilen zusammengehalten.

Im folgenden Beispiel verwenden wir die orphans-Eigenschaft, um die Anzahl der Zeilen zu steuern, die am unteren Rand einer Spalte verbleiben. Sie können diesen Wert ändern, um die Wirkung auf den Umbruch des Inhalts zu sehen.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
  orphans: 3;
}

Wenn Dinge nicht wie erwartet funktionieren

Wenn Sie kleine Mengen von Inhalten haben und versuchen, Umbrüche auf mehreren Elementen zu steuern, muss Ihr Inhalt irgendwo brechen, sodass Sie möglicherweise nicht immer das gewünschte Ergebnis erzielen. In gewissem Maße ist Ihre Nutzung der Fragmentierung immer ein Vorschlag an den Browser, Umbrüche auf diese Weise zu steuern, wenn es möglich ist. Wenn der Inhalt nicht dort bricht, wo Sie es beabsichtigten, könnte das Ergebnis unordentlich sein, aber der Inhalt bleibt Ihren Nutzern dennoch zugänglich.