Übersicht

Die column-width CSS Eigenschaft schlägt eine optimale Spaltenbreite vor. Dies ist kein absoluter Wert, sondern lediglich ein Hinweis an den Browser, welcher die Breite der Spalte anhand des vorgeschlagenen Wertes anpasst, was skalierbare Designs ermöglicht, die sich verschiedenen Bildschirmgrößen anpassen. Besonders wenn die column-count CSS Eigenschaft angegeben ist, welche Vorrang hat, wenn es darum geht, eine exakte Spaltenbreite zu setzen, müssen alle Längenwerte angegeben werden. In horizontalem Text sind dies width, column-width, column-gap und column-rule-width.

Initialwertauto
Anwendbar aufBlockcontainer außer Tabellen umgebende Boxen
VererbtNein
Medienvisuell
Berechneter Wertthe absolute length, zero oder larger
AnimationstypLängenangabe
Kanonische Reihenfolgenach Grammatik

Syntax

/* Schlüsselwortwert */
column-width: auto;

/* Verschiedene <length> Werte */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

/* Globale Werte */
column-width: inherit;
column-width: initial;
column-width: unset;

Werte

<length>
Ist ein <length> Wert, der einen Hinweis auf die optimale Breite der Spalte gibt. Die tatsächliche Spaltenbreite kann größer (um den verfügbaren Platz auszufüllen) oder schmaler (nur, falls der verfügbare Platz kleiner als die angegebene Spaltenbreite ist) sein. Die Länge muss positiv sein, ansonsten ist sie ungültig.
auto
Ist ein Schlüsselwort, das angibt, dass die Breite der Spalte durch andere CSS Eigenschaften wie column-count bestimmt werden soll.

Formale Syntax

<length> | auto

Beispiele

HTML Inhalt

<div class="content-box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

CSS Inhalt

.content-box {
  border: 10px solid #0ff;

  /* Chrome, Safari, Opera Präfix */
  -webkit-column-width: 100px;

  /* Mozilla Firefox Präfix */
  -moz-column-width: 100px;

  column-width: 100px;
}

Spezifikationen

Spezifikation Status Kommentar
CSS Writing Modes Module Level 3
Die Definition von 'column-width' in dieser Spezifikation.
Anwärter Empfehlung Fügt innere Größen über die Schlüsselwörter min-content, max-content, fill-available und fit-content hinzu.
CSS Multi-column Layout Module
Die Definition von 'column-width' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung 1.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 11.1Safari Vollständige Unterstützung 3
Mit Präfix
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung 5.0
Vollständige Unterstützung 5.0
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Intrinsic sizes
Experimentell
Chrome Keine Unterstützung NeinEdge ? Firefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android ?
On display: table-captionChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 37IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung 50Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 37Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung 5.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Prinz_Rana, teoli, Sebastianz, eseifert
Zuletzt aktualisiert von: SJW,