column-width

Ü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 aufNicht ersetzte block-Elemente (außer table-Elemente), table-cell- oder inline-block-Elemente
VererbtNein
Medienvisuell
Berechneter Wertthe absolute length, zero oder larger
Animierbarja, als Längenangabe
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale 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.</length>
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.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung (Ja)-webkit 1.5 (1.8)-moz 10 11.1 3.0 (522)-webkit
Innere Größen Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
für display: table-on, display: table-caption (Ja) 37 (37) (Ja) (Ja) (Ja)
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung (Ja) 1.0 (1.8)-moz (Ja) (Ja) (Ja)
Innere Größen Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
für display: table-on, display: table-caption (Ja) 37.0 (37) (Ja) (Ja) (Ja)

Schlagwörter des Dokuments und Mitwirkende

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