CSS column-rule Eigenschaft
Die Kurzschreibweise column-rule legt Stil, Breite und Farbe der Linie zwischen Spalten fest. Beispiele und Erklärungen.
Die Kurzschreibweise column-rule definiert Stil, Breite und Farbe der Linie, die zwischen den Spalten eines mehrspaltigen Layouts gezeichnet wird. Sie funktioniert ähnlich wie die Kurzschreibweise border, zeichnet aber anstelle eines Rahmens um ein Element eine einzelne vertikale Linie in jeden Spaltenzwischenraum.
Die Trennlinie ist rein dekorativ: Sie wird innerhalb des Zwischenraums gezeichnet und nimmt keinen eigenen Platz ein. Eine breitere Linie rückt die Spalten nicht auseinander — nur column-gap verändert den Abstand. Deshalb kann eine dicke Linie den Text auf beiden Seiten visuell überlappen, wenn der Zwischenraum zu klein ist.
column-rule ist eine Kurzschreibweise für diese drei Einzeleigenschaften:
- column-rule-width — die Dicke der Linie.
- column-rule-style — der Linienstil (
solid,dotted,dashedusw.). - column-rule-color — die Linienfarbe.
Wie jede Kurzschreibweise setzt sie ausgelassene Einzeleigenschaften auf ihren Ausgangswert zurück. column-rule: 5px solid; legt also Breite und Stil explizit fest, während die Farbe auf currentColor (die Textfarbe des Elements) zurückfällt und die Breite auf medium, wenn sie weggelassen wird.
Wann column-rule verwendet werden sollte
Verwenden Sie column-rule, wenn Sie fließenden Text in mehrere Spalten aufteilen und einen sichtbaren Trenner möchten — etwa bei zeitungsartigen Artikellayouts, Linklisten, Footer-Linkgruppen oder einem Glossar. Eine dezente 1px solid #ddd-Linie hilft dem Auge zu erkennen, wo eine Spalte endet und die nächste beginnt, ohne zusätzliches Markup zu erfordern.
Die Trennlinie wird nur gerendert, wenn das Element tatsächlich ein mehrspaltiges Layout erzeugt — das heißt, wenn column-count oder die Kurzschreibweise columns mehr als eine Spalte erstellt. Bei einem einspaltigen Element gibt es keine Zwischenräume, sodass nichts gezeichnet wird.
column-rule gehört zu den CSS3-Eigenschaften.
| Ausgangswert | medium (Breite), none (Stil), currentColor (Farbe) |
|---|---|
| Gilt für | Block-Container, die ein mehrspaltiges Layout etablieren. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Farbe und Breite der column-rule sind animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.columnRule = "5px outset #ccc"; |
Syntax
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;Die Reihenfolge der drei Werte ist flexibel — der Browser unterscheidet sie anhand ihres Typs, sodass column-rule: dotted 5px #ccc genauso gültig ist wie column-rule: 5px dotted #ccc. Wie bei border bedeutet der Wert none (oder das Weglassen des Stils), dass keine Linie gezeichnet wird, da column-rule-style standardmäßig none ist.
Beispiel der column-rule-Eigenschaft:
Beispiel mit Breiten-, Stil- und Farbwerten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule example</h1>
<p>Here the column-rule is set to 5px dotted gray.</p>
<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>Ergebnis
Wenn nur ein einzelner Wert angegeben wird, wird er als column-rule-style interpretiert (die anderen beiden Einzeleigenschaften behalten ihre Ausgangswerte).
Beispiel der column-rule-Eigenschaft mit einem Wert:
Beispiel mit einem einzelnen Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to only "dashed".</p>
<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>Beispiel der column-rule-Eigenschaft mit angegebener Breite, Stil und Farbe:
Beispiel mit allen angegebenen Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to 10px groove gray.</p>
<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>Werte
| Wert | Beschreibung |
|---|---|
| column-rule-width | Legt die Breite der Linie zwischen den Spalten fest. Standardwert ist "medium". |
| column-rule-style | Legt den Stil der Linie zwischen den Spalten fest. Standardwert ist "none". |
| column-rule-color | Legt die Farbe der Linie fest. Standardwert ist die aktuelle Farbe des Elements. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Worauf geachtet werden sollte
- Die Linie benötigt einen mehrspaltigen Kontext. Setzen Sie column-count (oder die Kurzschreibweise columns) auf dasselbe Element, sonst wird die Linie nie angezeigt.
- Ein fehlender Stil bedeutet keine Linie. Da
column-rule-stylestandardmäßignoneist, zeichnetcolumn-rule: 5px #ccc;nichts. Geben Sie immer ein Stil-Schlüsselwort wiesolidoderdottedan. - Die Linie verändert das Layout nicht. Ihre Breite wird aus dem vorhandenen Zwischenraum entnommen und nicht zu ihm addiert. Wenn eine dicke Linie den Text überlappt, vergrößern Sie column-gap — die Linie zentriert sich innerhalb dieses Zwischenraums.
- Keine Linie vor der ersten oder nach der letzten Spalte. Eine Linie wird nur zwischen benachbarten Spalten gezeichnet, niemals an den äußeren Rändern.
Browserunterstützung
column-rule wird von allen modernen Browsern (Chrome, Edge, Firefox, Safari und Opera) umfassend unterstützt. Ältere WebKit- und Gecko-Versionen benötigten die Präfixe -webkit- und -moz-, aber das präfixfreie column-rule kann heute sicher verwendet werden.