CSS column-span-Eigenschaft
Die column-span-Eigenschaft definiert, ob ein Element über eine Spalte oder über alle Spalten reicht. Sie ist eine der CSS3-Eigenschaften. Sie hat vier Werte: none, all, initial und inherit. none ist der Standardwert und hält das Element in einer einzelnen Spalte. Der Wert all lässt das Element über alle Spalten reichen. Diese Eigenschaft ist nützlich für breite Elemente wie Bilder oder Überschriften, sodass Sie wählen können, ob sie alle Spalten umfassen oder in einer bleiben.
INFO
Ein Element kann nur dann über Spalten hinwegreichen, wenn es ein Block-Element ist.
| Anfangswert | none |
|---|---|
| Gilt für | Block-Elemente im Fluss |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS Multi-column Layout Module Level 1 |
| DOM-Syntax | object.style.columnSpan = "all"; (Hinweis: CSS-Eigenschaften verwenden im JavaScript camelCase) |
Syntax
Syntax der CSS column-span-Eigenschaft
css
column-span: none | all | initial | inherit;Beispiel: none-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: none;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2> 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
Im folgenden Beispiel reicht die Überschrift über alle vier Spalten.
Beispiel: all-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
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: initial-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: initial;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
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: inherit-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: inherit;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
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 | Ausprobieren |
|---|---|---|
| none | Dies ist der Standardwert. Das Element reicht nicht über alle Spalten; es bleibt in einer Spalte. | Ausprobieren » |
| all | Das Element reicht über alle Spalten. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Funktion hat die 'column-span'-Eigenschaft in CSS?