Propriété CSS column-wrap

Syntaxe

/* Valeurs avec un mot-clé */
column-wrap: auto;
column-wrap: nowrap;
column-wrap: wrap;

/* Valeurs globales */
column-wrap: inherit;
column-wrap: initial;
column-wrap: revert;
column-wrap: revert-layer;
column-wrap: unset;

Valeurs

Cette propriété est définie par l'un des mots-clés suivants :

auto

La valeur initiale. Si la propriété column-height du conteneur de contenu est définie sur une valeur de type <length>, auto se résout en wrap, sinon elle se résout en nowrap.

nowrap

Les colonnes débordantes dépassent dans la direction en incise.

wrap

Les colonnes débordantes sont placées dans une nouvelle rangée dans la direction de bloc.

Description

La propriété column-wrap peut être utilisée pour définir les colonnes d'une mise en page multi-colonnes CSS afin qu'elles se replient sur une nouvelle rangée lorsqu'elles commencent à déborder de la largeur de la colonne. C'est utile pour créer des mises en page plus lisibles lors de l'utilisation des propriétés column-count ou column-width pour définir plusieurs colonnes.

Sans column-wrap, les colonnes excédentaires débordent sur le côté, et les lecteurs doivent faire défiler dans la direction en incise (inline en anglais) pour lire tout le contenu. La propriété column-height, ainsi que column-wrap, permet de définir une hauteur spécifique pour les colonnes et de les envelopper sur une nouvelle rangée de colonnes lorsque le bord du conteneur est atteint.

La valeur par défaut de column-wrap est auto, ce qui se résout en wrap lorsque column-height est défini sur une valeur de type <length> ; wrap permet aux colonnes à hauteur fixe de s'enrouler sur plusieurs rangées. Lorsque column-height est égal à auto, column-wrap: auto se résout en nowrap, permettant aux colonnes de déborder horizontalement si une hauteur de conteneur fixe est définie.

En raison de ce comportement par défaut, il n'est généralement pas nécessaire de définir explicitement la propriété column-wrap.

Définition formelle