CSS/Eigenschaften/Textausrichtung/Spalten/column-span

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft column-span erlaubt es, Elemente über mehrere Spalten zu verteilen, wie es etwa mit dem HTML-Attribut colspan für Tabellen möglich ist.

  • CSS 3.0
  • IE 10
  • Leer
  • Chrome
  • Safari
  • Opera

Details: caniuse.com

Folgende Angaben sind möglich:

  • none: Das Element fließt nicht über mehrere Spalten hinweg.
  • all: Das Element fließt über sämtliche Spalten hinweg. Der Inhalt davor wird automatisch zwischen den Spalten ausgeglichen.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
 
.mehrspaltig {  
  columns: 5 12em;  
  column-rule: 5px dotted gold;  
  hyphens: auto;  
} 
 
h2 {
  font-family: 'Parisienne', cursive;
  -webkit-column-span: all;
  column-span: all; 
}
Der mehrspaltige Text besteht aus bis zu 5 Spalten mit Textabsätzen und Überschriften.
Die h2-Überschriften werden mit column-span: all; über alle Spalten ausgedehnt.
Empfehlung: Da dieses Verhalten im Firefox (Stand: Oktober 2017) nicht unterstützt wird, könnte man die columns-Festlegungen nur für die p-Elemente treffen, sodass die h2-Überschriften die ganze Breite einnehmen.


Achtung!

Die Eigenschaft column-span ist derzeit (Stand: Oktober 2017) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-column-span

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.


Siehe auch[Bearbeiten]