column-span

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Die column-span CSS-Eigenschaft ermöglicht es, dass ein Element über alle Spalten hinweg spannt, wenn ihr Wert auf all gesetzt ist.

Probieren Sie es aus

Ein Element, das über mehr als eine Spalte spannt, wird als spannendes Element bezeichnet.

Syntax

css
/* Keyword values */
column-span: none;
column-span: all;

/* Global values */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;

Die column-span-Eigenschaft wird als eines der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

none

Das Element spannt nicht über mehrere Spalten.

all

Das Element spannt über alle Spalten. Inhalt im normalen Fluss, der vor dem Element erscheint, wird automatisch über alle Spalten ausgeglichen, bevor das Element erscheint. Das Element etabliert einen neuen Blockformatierungskontext.

Formale Definition

Initialer Wertnone
Anwendbar aufin-flow block-level Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

column-span = 
  none  |
  all

Beispiele

Einen Überschrift über Spalten spannen lassen

In diesem Beispiel wird die Überschrift so gestaltet, dass sie über alle Spalten des Artikels spannt.

HTML

html
<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>

CSS

css
article {
  columns: 3;
}

h2 {
  column-span: all;
}

Ergebnis

Spezifikationen

Specification
CSS Multi-column Layout Module Level 1
# column-span

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch