CSS-Eigenschaft column-count

Die Eigenschaft column-count gibt die Anzahl der Spalten, die den Inhalt eines Elements teilt, an. Es hat zwei Werte: auto und number. "Auto" ist der Standardwert dieser Eigenschaft. Die Anzahl der Spalten wird durch andere Eigenschaften wie z. B. column-width bestimmt. Der Wert "number" gibt die Anzahl der Spalten an, in die der Inhalt des Elements fließen soll.

Anfangswert auto
Gilt für Block-Containers außer Tabellen-Wrapper-Boxen
Geerbt Nein
Animierbar Ja, die Anzahl von Spalten ist animierbar.
Version CSS3
DOM Syntax object.style.columnCount = "4";

Syntax

column-count: number | auto | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: auto; /* Chrome, Safari, Opera */
      -moz-column-count: auto; /* Firefox */
      column-count: 3;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft column-count</h2>
    <div>
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Ein weiteres Beispiel, wo die Spalte mit 7 angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: 7; /* Chrome, Safari, Opera */
      -moz-column-count: 7; /* Firefox */
      column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-count</h2>
    <div>
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Es definiert die Anzahl der Spalten durch andere Eigenschaften. Das ist der Standardwert dieser Eigenschaft.
number Es definiert die Anzahl der Spalten, wo der Inhalt der Elemente geschrieben werden soll.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
50.0
-webkit-
12.0
-webkit-
52.0
+ 1.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'column-count'?
Finden Sie das nützlich?