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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.