CSS-Eigenschaft column-span

Die Eigenschaft column-span gibt an, ob sich das Element über eine Spalte oder alle Spalten erstreckt. Diese Eigenschaft hat zwei Werte: none und all. "None" ist der Standardwert der Eigenschaft color-span. Es umfasst das Element über eine Spalte. Der Wert "All" definiert, dass sich das Element über alle Spalten erstrecken soll..

Die Eigenschaft column-span kann breite Bilder umfassen. Es ist jedoch nicht möglich, ein Bild über eine Anzahl von Spalten zu verteilen. Es kann gewählt werden, ob das Bild alle Spalten umfassen soll oder ob es überhaupt nicht umfassen soll.

Ein Element kann nur dann alle Spalten umfassen, wenn es sich um ein Bloc-Level-Element handelt.
Anfangswert none
Gilt für In-flow Block-Level-Elemente
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.columnSpan = "all";

Syntax

column-span: none | all | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: 4; /* Chrome, Safari, Opera */
      -moz-column-count: 4; /* Firefox */
      column-count: 4;
      }
      h2 {
      -webkit-column-span: none; /* Chrome, Safari, Opera */
      column-span: none;
      }
    </style>
  </head>
  <body>
    <div>
      <h2> Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie</h2>
    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>

Im folgenden Beispiel erstreckt sich die Überschrift über alle vier Spalten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: 4; /* Chrome, Safari, Opera */
      -moz-column-count: 4; /* Firefox */
      column-count: 4;
      }
      h2 {
      -webkit-column-span: all; /* Chrome, Safari, Opera */
      column-span: all;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie</h2>
      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
none Das ist der Standardwert. Das Element erstreckt sich nicht über alle Spalten. Sie erstreckt sich über eine Spalte.
all Das Element erstreckt sich über alle Spalten.
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-
65.0+ 3.0
-webkit-
11.1
+ 15.0 -webkit-

Übe dein Wissen

Welche Werte kann die CSS-Eigenschaft 'column-span' annehmen, und was bedeuten sie?
Finden Sie das nützlich?