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 column-wrap CSS Eigenschaft legt das Umbruchverhalten für überlaufende Spalten in einem CSS-Mehrspalten-Layout 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
Beschreibung
Die column-wrap Eigenschaft kann verwendet werden, um die Spalten eines CSS-Mehrspalten-Layouts auf eine neue Zeile umzubrechen, wenn sie die Spaltenbreite zu überlaufen beginnen. Dies ist nützlich, um besser lesbare Layouts zu erstellen, wenn die column-count oder column-width Eigenschaft verwendet wird, um mehrere Spalten festzulegen.
Ohne column-wrap werden überschüssige Spalten seitlich überlaufen und Leser müssen in der Inline-Richtung scrollen, um den gesamten Inhalt zu lesen. Die column-height Eigenschaft, zusammen mit column-wrap, ermöglicht es, eine spezifische Höhe für die Spalten festzulegen und sie auf eine neue Zeile von Spalten umzubrechen, wenn der Rand des Containers erreicht ist.
Der Standardwert von column-wrap ist auto, was zu wrap wird, wenn column-height auf einen <length>-Wert gesetzt ist; wrap ermöglicht, dass die fixierten Spaltenhöhen auf mehrere Zeilen verteilt werden. Wenn column-height gleich auto ist, wird column-wrap: auto zu nowrap, was es erlaubt, dass Spalten horizontal überlaufen, wenn eine feste Containerhöhe gesetzt ist.
Aufgrund dieses Standardverhaltens müssen Sie die column-wrap Eigenschaft 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 column-wrap Eigenschaft, um ein umgebrochenes Mehrspalten-Layout durch Setzen einer column-height Eigenschaft 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 Mehrspalten-Container, indem wir die column-width Eigenschaft auf 150px setzen, was bedeutet, dass der Container so viele Spalten wie möglich enthalten wird, wobei jede mindestens 150px breit ist. Die gap-Eigenschaft setzt einen horizontalen Abstand zwischen den Spalten und einen vertikalen Abstand zwischen den Zeilen der Spalten. Wir setzen dann die column-height auf 3em, was dazu führt, dass der Standardwert auto der column-wrap Eigenschaft zu wrap wird, um umgebrochene Zeilen von Spalten zu erstellen.
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
Ergebnis
Vergleich wrap und nowrap
Dieses Beispiel zeigt ein Mehrspalten-Layout, 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 Absätze mit Inhalten, entnommen von den HTML-, CSS- und JavaScript-Startseiten von MDN, und ein JavaScript-gesteuertes <input type="checkbox"> Element, um den column-wrap Eigenschaftswert des Containers zwischen nowrap und wrap umzuschalten. Das HTML und JavaScript wurde zur Übersichtlichkeit ausgeblendet.
CSS
Wir machen das <body>-Element zu einem Mehrspalten-Container, indem wir die column-count auf 3 setzen. Wir setzen dann einen gap von 3em 2em, was zu einem Abstand von 3em zwischen den Zeilen und einem Abstand von 2em zwischen den Spalten führt.
Wir setzen dann eine column-height von 90vh, wodurch die Spalten fast so hoch wie das Viewport werden. Wir setzen auch column-wrap auf nowrap, was dazu führt, dass überschüssige Inhaltsäulen horizontal überlaufen. Dies ist erforderlich, da der anfängliche column-wrap Wert auto ist, was zu wrap wird, wenn column-height auf einen <length>-Wert gesetzt ist.
Das Kontrollkästchen schaltet die column-wrap Eigenschaft zwischen nowrap und wrap um. Wenn wrap gesetzt ist, überlaufen die überschüssigen Inhaltsäulen vertikal in neue Zeilen von Spalten, wodurch das vertikale Layout entsteht. Der column-height Wert sorgt dafür, dass jede Zeile von Spalten den Viewport füllt.
body {
column-count: 3;
gap: 3em 2em;
padding: 0 2em;
column-height: 90vh;
column-wrap: nowrap;
}
Als Nächstes setzen wir die column-span Eigenschaft des <h1> Elements auf all, um die Überschrift über alle Spalten zu spannen, und setzen die margin-top Eigenschaft des ersten <p> auf 0, sodass es mit dem oberen Rand der Spalten übereinstimmt.
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
Ergebnis
Schalten Sie das Kontrollkästchen um, um den Wert der column-wrap Eigenschaft zu ändern und das Layout zwischen horizontalem und vertikalem Scrollen zu wechseln. Wenn column-wrap auf nowrap gesetzt ist, überlaufen die Spalten horizontal; wenn column-wrap auf wrap gesetzt ist, werden neue Zeilen von Spalten vertikal hinzugefügt.
Spezifikationen
| Spezifikation |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-wrap |
Browser-Kompatibilität
Siehe auch
column-countcolumn-widthcolumnsKurzschreibweisecolumn-height- CSS Mehrspalten-Layout Modul