CSS-Eigenschaft column-width

Die CSS-Eigenschaft column-width definiert die Breite der Spalten. Wenn die Breite des Rahmens schmaler als der angegebene Wert ist, ist die Breite der einzelnen Spalte kleiner als die angegebene Spaltenbreite. Es hat zwei Werte: auto und length. "Auto" ist der Standardwert der Eigenschaft column-width. "Length" gibt die Breite der Spalten durch px, em und ch an.

Es wurden einige Eigenschaftserweiterungen hinzugefügt: -webkit- für Safari, Google Chrome und Opera (neuere Versionen), -moz- für Firefox, -o- für ältere Versionen von Opera usw.
Anfangswert auto
Gilt für Block-Containers mit Ausnahme von Tabellen-Wrapper-Boxen
Geerbt Nein
Animierbar Ja, der Rand und die Breite sind animierbar.
Version CSS3
DOM Syntax object.style.columnRuleWidth = "5px";

Syntax

column-width: auto | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-width: 80px; /* Chrome, Safari, Opera */
      -moz-column-width: 80px; /* Firefox */  
      column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft column-width</h2>
    <p>Hier ist die Breite für column auf 80px eingestellt.</p>
    <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 Die Breite der Spalte wird vom Browser angegeben.
Das ist der Standardwert.
length TDie Breite der Spalten wird durch die Länge angegeben.
initial Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
50.0
-webkit-
12.0
-webkit-
50.0
+ 11.5 -moz-
3.0
-webkit-
11.1 +

Übe dein Wissen

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