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
/* 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
Formale Definition
Anfangswert | none |
---|---|
Anwendbar auf | in-flow block-level Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
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
<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
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.