W3docs
de
Anmelden

CSS column-rule-width Eigenschaft

Die CSS-Eigenschaft column-rule-width legt die Dicke der Linie fest, die zwischen den Spalten eines Mehrspalten-Layouts gezeichnet wird.

Die CSS-Eigenschaft column-rule-width legt die Dicke der Linie (der Trennlinie) fest, die zwischen den Spalten eines Mehrspalten-Layouts gezeichnet wird. Sie funktioniert wie eine Rahmenbreite — statt einen Kasten zu umgeben, liegt die Linie jedoch im Abstand zwischen den Spalten. Sie gehört zu den CSS3-Eigenschaften.

Allein bewirkt column-rule-width nichts Sichtbares. Die Linie erscheint nur, wenn column-rule-style auf etwas anderes als none (dem Anfangswert) gesetzt ist, da eine Linie ohne Stil nichts zu zeichnen hat. Außerdem wird mehr als eine Spalte benötigt — die Linie wird nur in Lücken gezeichnet, die tatsächlich Spalten trennen, und niemals im leeren Raum, der entsteht, wenn der Inhalt nicht alle Spalten füllt.

Diese Eigenschaft akzeptiert einen der folgenden Werte:

  • thin — eine dünne Linie.
  • medium — eine mittlere Linie. Dies ist der Anfangswert.
  • thick — eine dicke Linie.
  • <length> — eine explizite Breite wie 2px oder 0.2em. Prozentwerte und negative Werte sind nicht erlaubt.
Info

Die Spezifikation überlässt die genaue Pixeldicke von thin, medium und thick bewusst dem Browser. Sie garantiert lediglich die Reihenfolge: thin ≤ medium ≤ thick. Wenn Sie ein vorhersehbares Ergebnis über Browser hinweg benötigen, verwenden Sie eine <length>.

In den meisten Stylesheets werden Breite, Stil und Farbe gemeinsam mit der Kurzschreibweise column-rule gesetzt, statt drei separate Deklarationen zu schreiben:

/* These two rules are equivalent */
column-rule: 15px groove #1c87c9;

column-rule-width: 15px;
column-rule-style: groove;
column-rule-color: #1c87c9;
Anfangswertmedium
Gilt fürMehrspalten-Elemente.
VererbbarNein.
AnimierbarJa. Breite und Farbe der Linie sind animierbar.
VersionCSS3
DOM-Syntaxobject.style.columnRuleWidth = "5px";

Syntax

Syntax der CSS-Eigenschaft column-rule-width

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

Beispiel der Eigenschaft column-rule-width:

Beispiel der CSS-Eigenschaft column-rule-width mit dem Wert thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: dotted;
        column-rule-color: #666;
        column-rule-width: thick;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width 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 »

Ergebnis

CSS column-rule-width Eigenschaft

Beispiel der Eigenschaft column-rule-width mit dem Wert "thin":

Beispiel der CSS-Eigenschaft column-rule-width mit dem Wert thin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: solid;
        column-rule-width: thin;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width 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 »

Beispiel der Eigenschaft column-rule-width mit dem Wert "15px":

Beispiel der CSS-Eigenschaft column-rule-width mit einem Längenwert

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

WertBeschreibungAusprobieren
mediumDie Linie ist mittelbreit. Dies ist der Standardwert.
thickDie Linie ist dick.
thinDie Linie ist dünn.
lengthLegt die Breite der Linie fest.
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Wichtige Hinweise

  • Die Linie nimmt keinen Layout-Platz ein. Wie ein box-shadow wird die Linie innerhalb des column-gap gezeichnet. Eine Linie, die breiter als der Abstand ist, überlappt den Spalteninhalt, anstatt die Spalten auseinander zu schieben. Stellen Sie daher sicher, dass der Abstand breit genug für die gewählte Breite ist.
  • Keine Linie ohne Stil. Wenn column-rule-style den Wert none hat (oder nicht gesetzt ist), hat eine Änderung der Breite keinerlei sichtbaren Effekt. Dies ist der häufigste Grund, warum eine Linie "nicht erscheint".
  • Nur Längenangaben — keine Prozentwerte. Im Gegensatz zu vielen CSS-Größen akzeptiert column-rule-width keine Prozent- und negativen Werte; ein ungültiger Wert führt dazu, dass die gesamte Deklaration ignoriert wird.
  • Sie ist animierbar. Ein Übergang der Breite erzeugt ein gleichmäßiges Verdicken oder Verdünnen der Trennlinie.

Verwandte Eigenschaften

Die Mehrspalten-Linie wird durch eine kleine Gruppe von Eigenschaften gesteuert, die in der Regel gemeinsam verwendet werden:

Übung

Übung
Was bewirkt die Eigenschaft 'column-rule-width' in CSS?
Was bewirkt die Eigenschaft 'column-rule-width' in CSS?
Was this page helpful?