column-wrap
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 spezifiziert das Umbruchverhalten von Überlaufspalten in einem CSS-Mehrspaltenlayout.
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
auto-
Der Anfangswert. Wenn der Inhaltselement
column-heightauf eine<length>gesetzt ist, löst sichautoinwrapauf, andernfalls innowrap. nowrap-
Spalten laufen in der Inline-Richtung über.
wrap-
Überlaufende Spalten werden in einer neuen Reihe in Blockrichtung platziert.
Beschreibung
Die column-wrap Eigenschaft kann verwendet werden, um die Spalten eines CSS-Mehrspaltenlayouts so einzurichten, dass sie in einer neuen Reihe umbrechen, wenn sie beginnen, die Spaltenbreite zu überlaufen. Dies ist nützlich, um bei Verwendung der Eigenschaften column-count oder column-width zur Einstellung mehrerer Spalten leserlichere Layouts zu erstellen.
Ohne column-wrap laufen überzählige Spalten zur Seite über, und Leser müssen in der Inline-Richtung scrollen, um den gesamten Inhalt zu lesen. Die column-height Eigenschaft ermöglicht zusammen mit column-wrap, eine spezifische Höhe für die Spalten festzulegen und sie in eine neue Spaltenreihe umzubrechen, wenn der Rand des Containers erreicht ist.
Der Standardwert für column-wrap ist auto, das sich in wrap auflöst, wenn column-height auf einen <length>-Wert gesetzt ist; wrap ermöglicht es den Spalten mit fester Höhe, auf mehrere Reihen umzubrechen. Wenn column-height gleich auto ist, löst sich column-wrap: auto in nowrap auf, was es den Spalten erlaubt, horizontal überzulaufen, wenn eine feste Containerhöhe eingestellt ist.
Aufgrund dieses Standardverhaltens ist es generell nicht notwendig, die column-wrap Eigenschaft explizit zu setzen.
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 zur Erstellung eines umbrochenen Mehrspaltenlayouts durch Einstellen einer column-height Eigenschaft.
HTML
Wir verwenden ein Gedicht von Dr. Seuss in einem <ol>, das 28 <li>s enthält, 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 Spalte mindestens 150px breit ist. Die gap Eigenschaft setzt einen horizontalen Abstand zwischen Spalten und einen vertikalen Abstand zwischen Spaltenreihen. Wir setzen dann die column-height auf 3em, wodurch der Standardwert auto der column-wrap Eigenschaft in wrap aufgelöst wird, um umbrochene Spaltenreihen 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 wrap und nowrap Werten demonstriert, indem es Ihnen ermöglicht, den column-wrap Wert des Spaltencontainers zwischen diesen beiden umzuschalten. Das Ergebnis ist ein Layout, das dynamisch zwischen horizontalem und vertikalem Scrollen wechselt.
HTML und JavaScript
Das Markup dieses Beispiels enthält mehrere Absätze des Inhalts, die von den MDN HTML-, CSS- und JavaScript-Startseiten entnommen wurden, und ein JavaScript-gestütztes <input type="checkbox"> Element, um den column-wrap Eigenschaftswert des Containers zwischen nowrap und wrap umzuschalten. Der HTML- und JavaScript-Code wurde der Kürze halber ausgeblendet.
CSS
Wir machen das <body> Element zu einem Mehrspalten-Container, indem wir die column-count auf 3 setzen. Wir setzen dann ein gap von 3em 2em, was einen 3em Abstand zwischen den Reihen und einen 2em Abstand zwischen den Spalten ergibt.
Wir setzen dann eine column-height von 90vh, wodurch die Spalten fast so hoch wie das Ansichtsfenster werden. Wir setzen auch column-wrap auf nowrap, was dazu führt, dass überflüssige Inhaltsspalten horizontal überlaufen. Dies ist erforderlich, da der anfängliche column-wrap Wert auto ist, welcher sich in wrap auflöst, wenn column-height auf einen <length>-Wert gesetzt ist.
Das Kontrollkästchen schaltet die column-wrap Eigenschaft zwischen nowrap und wrap um. Wenn auf wrap gesetzt, laufen die überzähligen Inhaltsspalten vertikal in neue Reihen von Spalten über und schaffen so das vertikale Layout. Der column-height Wert führt dazu, dass jede Spaltenreihe das Ansichtsfenster ausfüllt.
body {
column-count: 3;
gap: 3em 2em;
padding: 0 2em;
column-height: 90vh;
column-wrap: nowrap;
}
Anschließend setzen wir die column-span Eigenschaft des <h1> Elements auf all, damit die Überschrift alle Spalten überspannt, und setzen die margin-top Eigenschaft des ersten <p> auf 0, damit sie mit der Oberkante 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 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 neue Spaltenreihen vertikal hinzugefügt.
Spezifikationen
| Specification |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-wrap |
Browser-Kompatibilität
Siehe auch
column-countcolumn-widthcolumnsKurzschriftcolumn-height- CSS Mehrspaltenlayout Modul