`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.

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 festzulegen.

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

auto: Die Anzahl der Spalten wird durch andere CSS-Eigenschaften bestimmt, wie z.B. column-width.
<integer>: Ist eine strikt positive <integer>, die die ideale Anzahl von Spalten beschreibt, in die der Inhalt des Elements geflossen wird. Wenn auch column-width auf einen nicht-auto Wert gesetzt ist, gibt dies lediglich die maximal erlaubte Anzahl von 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 über drei Spalten verteilen

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>