CSS/Eigenschaften/Textausrichtung/Spalten/column-rule
Aus SELFHTML-Wiki
< CSS | Eigenschaften | Textausrichtung | Spalten(Weitergeleitet von Column-rule)
Die Eigenschaft column-rule ist eine Zusammenfassung der möglichen Einzelangaben column-rule-width, column-rule-style und column-rule-color, mit der Sie das Aussehen der Linien zwischen den Spalten bestimmen können.
Details: caniuse.com
Notieren Sie Angaben zu Linienstärke, Style und Farbe mit Leerzeichen dazwischen:
- Linienstärke: optional, Voreinstellung
medium
- style: Voreinstellung
none
, alle border-style-Werte möglich - Farbangabe: Voreinstellung ist die Textfarbe des Elements
Hinweis
Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge
column-rule: width style color;
.Anwendungsbeispiele[Bearbeiten]
Beispiel
ansehen …
.mehrspaltig {
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em;
column-gap: 1em;
-webkit-column-rule: dashed;
column-rule: dashed;
}
Erzähltext mit Zwischenlinien[Bearbeiten]
Beispiel
ansehen …
.mehrspaltig {
-webkit-column-count: 5;
-webkit-column-width: 12em;
columns: 5 12em;
-webkit-column-rule: 5px dotted gold;
column-rule: 5px dotted gold;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Der mehrspaltige Text erhält mit
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
column-rule: 5px dotted gold;
eine 5px breite goldene gepunktete Trennlinie.Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
Siehe auch[Bearbeiten]
- Referenz: column-rule
column-rule: dashed
eine gestrichelte Trennlinie. Als Strichstärke wird die Voreinstellungmedium
; als Farbe die Textfarbe verwendet.Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.