CSS-Eigenschaft column-rule-width

Die CSS-Eigenschaft column-rule-width definiert die Breite der Regel zwischen den Spalten.

Zuerst muss man die Eigenschaft columns oder column-rule-style definieren, dann die Eigenschaft - column-rule-width. Ein Element muss einige Regeln haben, bevor Sie die Breite einstellen können.

Diese Eigenschaft hat folgende Werte:

  • medium
  • thick
  • thin
  • length
Die Spezifikation definiert nicht die genaue Dicke jedes Schlüsselwortes. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.
Anfangswert medium
Gilt für Multicol-Elemente
Geerbt Nein
Animierbar Ja, die Breite und Farbe der Regel ist animierbar.
Version CSS3
DOM Syntax object.style.columnRuleWidth = "5px";

Syntax

column-rule-width: medium | thin | thick | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;
      -webkit-column-rule-style: dotted;
      -webkit-column-rule-color: #666;
      -webkit-column-rule-width: 15px;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;
      -moz-column-rule-style: dotted;
      -moz-column-rule-color: #666;
      -moz-column-rule-width: 15px;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: dotted;
      column-rule-color: #666;
      column-rule-width: 15px;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-width</h2>
    <div>
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. 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>

Ein weiteres Beispiel, wo die Breite der Regel mit "thin" angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;
      -webkit-column-rule-style: solid;
      -webkit-column-rule-width: thin;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;
      -moz-column-rule-style: solid;
      -moz-column-rule-width: thin;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-width: thin;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-width</h2>
    <div>
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. 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>

Ein weiteres Beispiel, wo die Breite der Regel mit "15px" angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;
      -webkit-column-rule-style: groove;
      -webkit-column-rule-color: #1c87c9;
      -webkit-column-rule-width: 15px;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;
      -moz-column-rule-style: groove;
      -moz-column-rule-color: #1c87c9;
      -moz-column-rule-width: 15px;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: groove;
      column-rule-color: #1c87c9;
      column-rule-width: 15px;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-width</h2>
    <div>
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. 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
medium Die Regel ist medium. Das ist der Standardwert.
thick Die Regel ist thick.
thin Die Regel ist thin.
length Zeigt die Regel der Breite an.
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-
52.0
+ 3.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-

Übe dein Wissen

Welcher Wertebereich gilt für die CSS-Eigenschaft 'column-rule-width'?
Finden Sie das nützlich?