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

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

Formale Syntax

column-span = 
none |
<integer [1,∞]> |
all |
auto

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-span
all
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch