W3docs
de
Anmelden

CSS column-span Eigenschaft

Die CSS-Eigenschaft column-span legt fest, ob ein Element eine oder alle Spalten überspannt. Werte und Beispiele.

Die CSS-Eigenschaft column-span steuert, ob ein Element innerhalb einer einzigen Spalte eines mehrspaltigem Layout bleibt oder sich über alle Spalten erstreckt. Sie gehört zu den CSS3-Eigenschaften.

Diese Seite erklärt, was column-span bewirkt, welche Werte es akzeptiert, ausführbare Beispiele für jeden Wert, wann man es einsetzen sollte und welche Fallstricke es zu beachten gilt.

Welches Problem es löst

Wenn Sie Text mit column-count oder columns in mehrere Spalten aufteilen, fließt jedes untergeordnete Element des mehrspaltigen Containers Spalte für Spalte — einschließlich Überschriften. Eine Abschnittsüberschrift, die als Banner über den gesamten Block wirken soll, würde sonst eingezwängt in der ersten Spalte erscheinen.

column-span: all hebt ein Element aus dem Spaltenfluss heraus, sodass es die volle Breite überspannt, während der Inhalt darüber und darunter weiterhin in Spalten fließt. Genau so handhaben Magazin- und Zeitungslayouts eine Überschrift über mehrspaltigen Fließtext.

.article {
  column-count: 3;
}
.article h2 {
  column-span: all; /* headline runs the full width above the 3 columns */
}
Info

Ein Element kann Spalten nur überspannen, wenn es ein Block-Level-Element im normalen Fluss ist. Gefloatete, absolut positionierte oder Inline-Elemente ignorieren column-span.

Anfangswertnone
Gilt fürBlock-Level-Elemente im normalen Fluss
VererbtNein.
AnimierbarNein.
VersionCSS Multi-column Layout Module Level 1
DOM Syntaxobject.style.columnSpan = "all"; (Note: CSS properties use camelCase in JavaScript)

Syntax

Syntax der CSS column-span Eigenschaft

column-span: none | all | initial | inherit;

Beispiel: Wert none

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: none;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS column-span Beispiel mit dem Wert none

Mit none wird die Überschrift wie jeder andere Inhalt behandelt und bleibt in der ersten Spalte. Im nächsten Beispiel erstreckt sich dieselbe Überschrift über alle vier Spalten.

Beispiel: Wert all

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: all;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Probier es selbst »

Beispiel: Wert initial

initial setzt column-span auf seinen Standardwert zurück, der none ist — die Überschrift verhält sich also genau wie im ersten Beispiel und bleibt in einer Spalte.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: initial;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2> 
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Probier es selbst »

Beispiel: Wert inherit

inherit übernimmt den berechneten column-span-Wert vom übergeordneten Element. Beachten Sie, dass column-span standardmäßig nicht vererbt wird, daher verwenden Sie dieses Schlüsselwort nur dann, wenn ein untergeordnetes Element explizit die Einstellung seines Elternelements übernehmen soll.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: inherit;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Probier es selbst »

Wann column-span verwendet werden sollte

  • Überschriften und Abschnittstitel, die über mehrspaltigen Fließtext stehen sollen, wie der Kopf einer Zeitung.
  • Zitate oder Hervorhebungen, die den Spaltenrhythmus unterbrechen und besondere Aufmerksamkeit erregen sollen.
  • Breite Medien — ein vollbreites Bild, eine Tabelle oder ein Diagramm, das in einer einzelnen schmalen Spalte gequetscht wirken würde.

Für alles andere belassen Sie es beim Standard none, damit der Inhalt natürlich zwischen den Spalten fließt.

Zu beachtende Punkte

  • Nur none und all sind Spanning-Werte. Es gibt kein column-span: 2, um eine beliebige Anzahl von Spalten zu überspannen — es ist alles oder nichts.
  • Ein überspannendes Element teilt den Spaltenbox. Der Inhalt davor füllt die Spalten, dann läuft das Element in voller Breite, danach beginnt der verbleibende Inhalt unterhalb in einer neuen Gruppe von Spalten.
  • column-span funktioniert nur innerhalb eines mehrspaltigen Containers. Ohne column-count oder columns am übergeordneten Element hat die Eigenschaft keine Wirkung.
  • column-span: all kann mit break-inside und dem Spaltenausgleich in manchen Browsern in Konflikt geraten, daher sollten Sie langen Inhalt testen.

Verwandte Eigenschaften

  • column-count — legt fest, in wie viele Spalten der Inhalt aufgeteilt wird.
  • column-width — legt die ideale Breite jeder Spalte fest.
  • columns — Kurzschreibweise für column-width und column-count.
  • column-gap — legt den Abstand zwischen den Spalten fest.
  • column-rule — zeichnet eine Linie zwischen den Spalten.

Werte

WertBeschreibung
noneDies ist der Standardwert. Das Element überspannt nicht alle Spalten; es bleibt in einer Spalte.
allDas Element überspannt alle Spalten.
initialSetzt die Eigenschaft auf ihren Standardwert (none).
inheritErbt die Eigenschaft vom übergeordneten Element.

Übung

Übung
Was ist die Funktion der Eigenschaft 'column-span' in CSS?
Was ist die Funktion der Eigenschaft 'column-span' in CSS?
Was this page helpful?