column-wrap CSS property
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die CSS-Eigenschaft column-wrap legt das Umbruchverhalten von überlaufenden Spalten in einem CSS-Mehrspaltenlayout fest.
Syntax
/* Keywords */
column-wrap: auto;
column-wrap: nowrap;
column-wrap: wrap;
/* Global values */
column-wrap: inherit;
column-wrap: initial;
column-wrap: revert;
column-wrap: revert-layer;
column-wrap: unset;
Werte
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
auto-
Der Anfangswert. Wenn die
column-heightdes Inhaltscontainers auf einen<length>gesetzt ist, wirdautozuwrapaufgelöst, andernfalls zunowrap. nowrap-
Spalten laufen in Inline-Richtung über.
wrap-
Überlaufende Spalten werden in Blockrichtung in einer neuen Zeile platziert.
Beschreibung
Die Eigenschaft column-wrap kann verwendet werden, um die Spalten eines CSS-Mehrspaltenlayouts in eine neue Zeile umbrechen zu lassen, wenn sie beginnen, über die Spaltenbreite hinauszulaufen. Dies ist nützlich, um besser lesbare Layouts zu erstellen, wenn die Eigenschaft column-count oder column-width verwendet wird, um mehrere Spalten festzulegen.
Ohne column-wrap laufen überschüssige Spalten seitlich über, und Leser müssen in Inline-Richtung scrollen, um den gesamten Inhalt zu lesen. Die Eigenschaft column-height ermöglicht es Ihnen zusammen mit column-wrap, eine bestimmte Höhe für die Spalten festzulegen und sie in eine neue Spaltenzeile umbrechen zu lassen, wenn der Rand des Containers erreicht wird.
Der Standardwert von column-wrap ist auto, was zu wrap aufgelöst wird, wenn column-height auf einen <length>-Wert gesetzt ist; wrap ermöglicht es den Spalten mit fester Höhe, auf mehrere Zeilen umzubrechen. Wenn column-height gleich auto ist, wird column-wrap: auto zu nowrap aufgelöst, wodurch die Spalten horizontal überlaufen können, wenn eine feste Containerhöhe festgelegt ist.
Aufgrund dieses Standardverhaltens müssen Sie die Eigenschaft column-wrap im Allgemeinen nicht explizit festlegen.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | mehrspaltige Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
column-wrap =
auto |
nowrap |
wrap
Beispiele
Grundlegende Verwendung
Dieses Beispiel demonstriert die grundlegende Verwendung der Eigenschaft column-wrap, um durch Festlegen einer Eigenschaft column-height ein umbrochenes Mehrspaltenlayout zu erstellen.
HTML
Wir fügen ein Gedicht von Dr. Seuss ein, indem wir ein <ol> mit 28 <li>s verwenden, gefolgt vom Namen des Autors in einem <p>.
<ol>
<li>One fish</li>
<li>Two fish</li>
<li>Red fish</li>
<li>Blue fish</li>
...
</ol>
<p>-- Dr. Seuss</p>
CSS
Wir definieren das <ol> als Mehrspaltencontainer, indem wir die Eigenschaft column-width auf 150px setzen. Das bedeutet, dass der Container so viele Spalten wie möglich enthält, wobei jede mindestens 150px breit ist. Die Eigenschaft gap legt einen horizontalen Abstand zwischen Spalten und einen vertikalen Abstand zwischen Spaltenzeilen fest. Anschließend setzen wir column-height auf 3em, wodurch der Standardwert auto der Eigenschaft column-wrap zu wrap aufgelöst wird, um umbrochene Spaltenzeilen zu erstellen.
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
Ergebnis
Vergleich von wrap und nowrap
Dieses Beispiel zeigt ein Mehrspaltenlayout, das den Unterschied zwischen den Werten wrap und nowrap demonstriert, indem Sie den column-wrap-Wert des Spaltencontainers zwischen den beiden umschalten können. Das Ergebnis ist ein Layout, das dynamisch zwischen horizontalem und vertikalem Scrollen wechselt.
HTML und JavaScript
Das Markup für dieses Beispiel enthält mehrere Inhaltsabsätze, die den HTML-, CSS- und JavaScript-Startseiten von MDN entnommen wurden, sowie ein JavaScript-gesteuertes Element <input type="checkbox">, um den Wert der Eigenschaft column-wrap des Containers zwischen nowrap und wrap umzuschalten. HTML und JavaScript wurden der Kürze halber ausgeblendet.
CSS
Wir machen das Element <body> zu einem Mehrspaltencontainer, indem wir column-count auf 3 setzen. Anschließend setzen wir gap auf 3em 2em, was zu einem Abstand von 3em zwischen Zeilen und 2em zwischen Spalten führt.
Dann setzen wir column-height auf 90vh, wodurch die Spalten nahezu so hoch wie der Viewport werden. Außerdem setzen wir column-wrap auf nowrap, wodurch überschüssige Inhaltsspalten horizontal überlaufen. Dies ist erforderlich, da der Anfangswert von column-wrap auto ist, was zu wrap aufgelöst wird, wenn column-height auf einen <length>-Wert gesetzt ist.
Das Kontrollkästchen schaltet die Eigenschaft column-wrap zwischen nowrap und wrap um. Wenn sie auf wrap gesetzt ist, laufen überschüssige Inhaltsspalten vertikal in neue Spaltenzeilen über und erzeugen das vertikale Layout. Der Wert von column-height bewirkt, dass jede Spaltenzeile den Viewport ausfüllt.
body {
column-count: 3;
gap: 3em 2em;
padding: 0 2em;
column-height: 90vh;
column-wrap: nowrap;
}
Als Nächstes setzen wir die Eigenschaft column-span des Elements <h1> auf all, damit die Überschrift alle Spalten überspannt, und setzen die Eigenschaft margin-top des ersten <p> auf 0, sodass sie mit dem oberen Rand der Spalten ausgerichtet ist.
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
Ergebnis
Schalten Sie das Kontrollkästchen um, um den Wert der Eigenschaft column-wrap zu ändern und das Layout zwischen horizontalem und vertikalem Scrollen zu wechseln. Wenn column-wrap auf nowrap gesetzt ist, laufen die Spalten horizontal über; wenn column-wrap auf wrap gesetzt ist, werden vertikal neue Spaltenzeilen hinzugefügt.
Spezifikationen
| Spezifikation |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-wrap |