CSS-Eigenschaft column-rule-width
Die CSS-Eigenschaft column-rule-width definiert die Breite der Linie zwischen den Spalten. Die Eigenschaft column-rule-width ist eine der CSS3-Eigenschaften.
Die Eigenschaft column-rule-width wird nur wirksam, wenn column-rule-style nicht none ist.
Diese Eigenschaft hat die folgenden Werte:
- medium
- thick
- thin
- length
INFO
Die Spezifikation definiert die genaue Dicke der einzelnen Schlüsselwörter nicht. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.
| Anfangswert | medium |
|---|---|
| Gilt für | Multicol-Elemente. |
| Vererbt | Nein. |
| Animierbar | Ja. Breite und Farbe der Linie sind animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.columnRuleWidth = "5px"; |
Syntax
Syntax der CSS-Eigenschaft column-rule-width
css
column-rule-width: medium | thin | thick | length | initial | inherit;Beispiel für die Eigenschaft column-rule-width:
Beispiel für die CSS-Eigenschaft column-rule-width mit dem Wert thick
html
<!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>Ergebnis
Beispiel für die Eigenschaft column-rule-width mit dem Wert "thin":
Beispiel für die CSS-Eigenschaft column-rule-width mit dem Wert thin
html
<!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>Beispiel für die Eigenschaft column-rule-width, angegeben als "15px":
Beispiel für die CSS-Eigenschaft column-rule-width mit dem Wert length
html
<!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>Werte
| Wert | Beschreibung | Play it |
|---|---|---|
| medium | Die Linie ist mittel. Dies ist der Standardwert. | Play it » |
| thick | Die Linie ist dick. | Play it » |
| thin | Die Linie ist dünn. | Play it » |
| length | Gibt die Breite der Linie an. | Play it » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What does the 'column-rule-width' property do in CSS?