`column-count` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die column-count CSS-Eigenschaft teilt den Inhalt eines Elements in die angegebene Anzahl von Spalten auf.

Die columns Kurzschreibweise kann verwendet werden, um die Werte der Eigenschaften column-count, column-height, und column-width in einer einzigen Deklaration zu setzen.

Probieren Sie es aus

column-count: 2;

column-count: 3;

column-count: 4;

column-count: auto;
column-width: 8rem;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  width: 100%;
  text-align: left;
}

Syntax

css

/* Keyword value */
column-count: auto;

/* <integer> value */
column-count: 3;

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

Werte

Diese Eigenschaft wird als ein einzelner Wert aus der folgenden Liste angegeben:

auto: Die Anzahl der Spalten wird durch andere CSS-Eigenschaften bestimmt, wie z.B. column-width.
<integer>: Ist eine streng positive <integer>, die die ideale Anzahl von Spalten beschreibt, in die der Inhalt des Elements fließen soll. Ist die column-width ebenfalls auf einen anderen Wert als auto gesetzt, gibt sie lediglich die maximal zulässige Anzahl an Spalten an.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Blockcontainer außer Tabellen umgebende Boxen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Integer

Formale Syntax

column-count = 
  auto             |
  <integer [1,∞]>  

<integer> = 
  <number-token>

Beispiele

Einen Absatz auf drei Spalten aufteilen

HTML

html

<p class="content-box">
  This is a bunch of text split into three columns using the CSS
  <code>column-count</code>
  property. The text is equally distributed over the columns.
</p>