CSS column-width-Eigenschaft

Die CSS-Eigenschaft column-width legt die ideale Breite jeder Spalte in einem Mehrspalten-Layout fest. Anstatt dem Browser mitzuteilen, wie viele Spalten erstellt werden sollen, geben Sie an, wie breit jede Spalte sein soll, und der Browser berechnet, wie viele Spalten in den verfügbaren Platz passen.

Dies ist der entgegengesetzte Ansatz zu column-count, wo Sie die Anzahl der Spalten festlegen und deren Breite variieren lassen. column-width macht Mehrspalten-Text standardmäßig responsiv: Wenn der Container breiter wird, erscheinen mehr Spalten; wenn er schmaler wird, fallen Spalten weg, bis nur noch eine einzige Spalte übrig bleibt.

Die Eigenschaft column-width ist eine der CSS3-Eigenschaften.

Wie column-width funktioniert

Der Wert ist am besten als gewünschte Mindestbreite zu verstehen, nicht als strenger Wert. Der Browser packt so viele Spalten mit (mindestens) dieser Breite hinein, wie hineinpassen, und dehnt sie dann aus, um den verbleibenden Platz zu füllen.

Wenn der Container mehrere Spalten der angegebenen Breite aufnehmen kann, erhalten Sie mehrere Spalten.
Wenn der Container schmaler als der angegebene Wert ist, erhalten Sie eine einzige Spalte, die so breit wie der Container ist — die Breite läuft nie aus dem Rahmen heraus.
Wenn column-count ebenfalls gesetzt ist, wird column-width zu einer maximalen Breite: Der Browser verwendet die Einschränkung, die zu weniger Spalten führt. Die Kurzform zum gleichzeitigen Setzen beider Werte ist columns.

Eine grobe Methode, das Ergebnis vorherzusagen: Anzahl der Spalten ≈ floor(Containerbreite / (column-width + column-gap)). Der Standardwert für column-gap ist 1em.

Wann man es verwendet

Verwenden Sie column-width, wenn Sie lesbare Zeilenlängen wünschen, die sich an den viewport anpassen — zum Beispiel um einen langen Artikel oder eine Liste kurzer Elemente in zeitungsartige Spalten fließen zu lassen, ohne Media Queries zu schreiben. Da die Spaltenanzahl automatisch angepasst wird, funktioniert dieselbe Regel auf einem Smartphone (eine Spalte) und auf einem breiten Desktop (drei oder vier Spalten).

Info

Moderne Browser unterstützen column-width ohne Vendor-Präfixe. Der Standardwert auto bedeutet, dass die Spaltenbreite durch andere Eigenschaften wie column-count bestimmt wird oder auf eine einzelne Spalte zurückfällt, wenn nichts anderes sie einschränkt.

Anfangswert	auto
Gilt für	Block-Container außer Tabellen-Wrapper-Boxen.
Vererbung	Nein.
Animierbar	Ja.
Version	CSS3
DOM-Syntax	object.style.columnWidth = "5px";

Syntax

Syntax der CSS-Eigenschaft column-width

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

Beispiel der column-width-Eigenschaft:

Beispiel der CSS-Eigenschaft column-width mit der length-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to 80px.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS column-width-Eigenschaft](https://api.w3docs.com/uploads/media/default/0001/03/5dc2724355e1e0cd7af891102d3b3d2c9e042376.png "CSS column-width Property" =420x)

Beispiel der column-width-Eigenschaft mit dem Wert "auto":

Mit auto legt der Browser keine Zielbreite fest. In Kombination mit column-count lässt es die count-Regel das Layout bestimmen; allein fällt es auf eine einzelne Spalte zurück.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to auto.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>

</html>

Probier es selbst »

Responsive Spalten ohne Media Queries

Da der Browser die Spaltenanzahl aus der verfügbaren Breite ableitet, erzeugt eine einzige column-width-Regel ein Layout, das sich von selbst neu anordnet. Hier fügen wir zusätzlich column-gap und eine column-rule zur Trennung hinzu. Vergrößern oder verkleinern Sie die Vorschau, um zu beobachten, wie Spalten erscheinen und verschwinden.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive columns</title>
    <style>
      .news {
        column-width: 14em;
        column-gap: 2em;
        column-rule: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="news">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Häufige Fallstricke

Es ist ein Ziel, keine Garantie. Die tatsächlich gerenderte Spaltenbreite entspricht selten genau dem gesetzten Wert — der Browser dehnt Spalten aus, um die Zeile zu füllen. Verwenden Sie es, um grob zu steuern, wie viele Spalten erscheinen, nicht deren pixelgenaue Breite.
column-width und column-count interagieren. Wenn beide vorhanden sind, behandelt der Browser column-width als Maximum und überschreitet column-count nie. Setzen Sie nur einen der beiden Werte, es sei denn, Sie möchten absichtlich eine Begrenzung auf beiden Achsen.
Hohe Inhalte können Spalten ungleichmäßig umbrechen. Verwenden Sie column-fill, um zu steuern, wie Inhalte über die Spalten verteilt werden.
Prozentwerte sind nicht erlaubt. Anders als bei vielen width-Eigenschaften akzeptiert column-width nur eine Längenangabe (px, em, ch, …) oder auto — kein %.

Werte

Wert	Beschreibung	Ausprobieren
auto	Die Breite der Spalte wird vom Browser bestimmt. Dies ist der Standardwert.
length	Die Breite der Spalten wird durch einen Längenwert angegeben.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Was bewirkt die Eigenschaft 'column-width' in CSS?

Die Eigenschaft 'column-width' gibt die Spaltenbreite in einem Mehrspalten-Layout an.Die Eigenschaft 'column-width' gibt die Anzahl der Spalten in einem Layout an.Die Eigenschaft 'column-width' gibt die Breite des Browserfensters an.Die Eigenschaft 'column-width' kann Werte in 'px', 'em', 'rem' oder als Prozentangabe annehmen.Die Eigenschaft 'column-width' gibt die bevorzugte Breite für Spalten an.