CSS column-rule-style Eigenschaft

Die CSS-Eigenschaft column-rule-style legt den Stil der Linie (Trennlinie), die zwischen den Spalten eines mehrspaltigen Layouts gezeichnet wird, fest. Die Spaltentrennlinie funktioniert genau wie ein border: Sie befindet sich im column-gap und trennt benachbarte Spalten visuell voneinander, wobei dieselben Linienstile wie bei einem Rahmen akzeptiert werden.

Diese Eigenschaft gehört zu den CSS3-Eigenschaften.

column-rule-style ist eine von drei Untereigenschaften, die die Kurzschreibweise column-rule bilden, zusammen mit column-rule-width und column-rule-color. Allein steuert sie nur die Form der Linie — in der Regel kombiniert man alle drei, um ein sichtbares Ergebnis zu erzielen.

Wann verwendet man sie

Greifen Sie auf column-rule-style zurück, wenn Sie fließenden Text in mehrere Spalten aufteilen und eine sichtbare Trennlinie möchten — ähnlich einem Zeitungs- oder Magazinlayout. Da die Trennlinie innerhalb des Abstands liegt, beansprucht sie keinen zusätzlichen Platz und schiebt den Inhalt nie auseinander, weshalb sie eine saubere Methode ist, Spalten zu trennen, ohne die Layoutbreite zu verändern.

Um diese Eigenschaft zu verwenden, müssen Sie ein Element zunächst mit den Eigenschaften columns oder column-count in einen mehrspaltigen Container umwandeln — die Trennlinie hat nichts, zwischen dem sie gezeichnet werden könnte, wenn es nur eine Spalte gibt.

Worauf Sie achten sollten

Die Trennlinie ist standardmäßig unsichtbar, da der Ausgangsstil none ist. Auch nach dem Festlegen eines Stils wird eine Trennlinie nur gerendert, wenn column-rule-width größer als 0 ist (die Standardbreite ist medium, was normalerweise sichtbar ist).
Die 3D-Stile — groove, ridge, inset und outset — hängen von der Farbe der Trennlinie ab. Bei einer sehr hellen oder transparenten Farbe kann der 3D-Effekt schwer zu erkennen sein; setzen Sie column-rule-color explizit.
hidden und none zeichnen beide nichts, aber hidden reserviert dennoch eine Breite im Abstand, während none auf null Breite zusammenfällt — der Unterschied ist nur relevant, wenn andere Trennlinienstile darauf treffen.

Die Eigenschaft column-rule-style hat die folgenden Werte:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Anfangswert	none
Gilt für	Mehrspaltige Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.columnRuleStyle = "dashed" ;

Syntax

Syntax der CSS-Eigenschaft column-rule-style

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Beispiel der Eigenschaft column-rule-style:

Beispiel der CSS-Eigenschaft column-rule-style mit dem Wert dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule-style property example</h2>
    <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

Im nächsten Beispiel ist die Trennlinie zwischen den Spalten double. Hier wird der Trennlinie mit der Eigenschaft column-rule-color eine Farbe und mit column-rule-width eine explizite Stärke zugewiesen, sodass die doppelte Linie klar sichtbar ist.

Beispiel der Eigenschaft column-rule-style mit dem Wert "double":

Beispiel der CSS-Eigenschaft column-rule-style mit dem Wert double

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: double;
        column-rule-color: #1c87c9;
        column-rule-width: 5px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-style property example</h1>
    <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 »

Werte

Wert	Beschreibung
none	Es ist keine Trennlinie definiert. Dies ist der Standardwert.
hidden	Die Trennlinie ist verborgen.
dotted	Die Trennlinie ist gepunktet.
dashed	Die Trennlinie ist gestrichelt.
solid	Die Trennlinie ist durchgezogen.
double	Die Trennlinie ist doppelt.
groove	Die Trennlinie ist eine 3D-Rille. Breite und Farbwerte definieren den Effekt.
ridge	Die Trennlinie ist ein 3D-Grat. Breite und Farbwerte definieren den Effekt.
inset	Die Trennlinie ist ein 3D-Einschnitt. Breite und Farbwerte definieren den Effekt.
outset	Die Trennlinie ist ein 3D-Vorsprung. Breite und Farbwerte definieren den Effekt.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche der folgenden Aussagen über die CSS-Eigenschaft column-rule-style sind wahr?

Die Eigenschaft column-rule-style wird verwendet, um den Stil der Trennlinie zwischen Spalten anzugeben.Der Standardwert der Eigenschaft column-rule-style ist 'none'.Die Eigenschaft column-rule-style kann nicht mit der @media-Regel verwendet werden.Die Werte von column-rule-style können jeden Rahmenstil nachbilden.Die Eigenschaft column-rule-style ist nur auf das `<div>`-Element anwendbar.