text-wrap-mode

Baseline 2024

Nouvellement disponible

Depuis October 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La propriété CSS text-wrap-mode contrôle si le texte à l'intérieur d'un élément est renvoyé à la ligne. Les différentes valeurs offrent des façons alternatives d'envelopper le contenu d'un élément de bloc. Elle peut également être définie et réinitialisée à l'aide de la propriété raccourcie text-wrap ou de la propriété raccourcie white-space.

Note : Les propriétés white-space-collapse et text-wrap-mode peuvent être déclarées ensemble en utilisant la propriété raccourcie white-space.

Note : Le nom de cette propriété est un espace réservé, en attendant que le CSSWG trouve un meilleur nom.

Exemple interactif

text-wrap-mode: wrap;

text-wrap-mode: nowrap;

<section class="default-example" id="default-example">
  <div class="whole-content-wrapper">
    <p>Éditez le texte dans la boîte&nbsp;:</p>
    <div class="transition-all" id="example-element">
      <p contenteditable>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut
        cum eum id quos est.
      </p>
    </div>
  </div>
</section>

.whole-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#example-element {
  border: 1px solid #c5c5c5;
  width: 250px;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
text-wrap-mode: wrap;
text-wrap-mode: nowrap;

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

Valeurs

Cette propriété définit si les lignes peuvent être renvoyées à la ligne aux opportunités de retour à la ligne souple non forcées. Valeurs possibles :

wrap: Le texte est renvoyé à la ligne aux caractères appropriés (par exemple les espaces, dans les langues comme l'anglais qui utilisent des séparateurs d'espaces) pour minimiser le débordement. C'est la valeur par défaut.
nowrap: Le texte ne se renvoie pas à la ligne. Il débordera de son élément conteneur plutôt que de passer à une nouvelle ligne.

Définition formelle

Valeur initiale	`wrap`
Applicabilité	conteneurs de texte et de bloc
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

text-wrap-mode = 
  wrap    |
  nowrap

Exemples

Renvoyer le contenu à la ligne

Le paramètre par défaut est de renvoyer le contenu à la ligne, donc la propriété text-wrap-mode n'est pas nécessaire. Dans cet exemple, le contenu passera à la ligne suivante pour s'adapter à la boîte, la dernière ligne étant plus longue que la boîte contenant, elle déborde.

HTML

html

<div class="box">LE CSS C'EST GÉNIAL</div>

CSS

css

.box {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: wrap;
}

Résultat

Ne pas renvoyer le contenu à la ligne

Dans cet exemple, le contenu ne passera pas à la ligne suivante pour s'adapter à la boîte, car il a été spécifiquement indiqué de ne pas renvoyer le contenu à la ligne avec text-wrap-mode: nowrap;. Le contenu est plus long que la boîte contenant, il déborde.

HTML

html

<div class="box">LE CSS C'EST GÉNIAL</div>

CSS

css

.box {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: nowrap;
}

Résultat

Spécifications

Spécification
CSS Text Module Level 4 # text-wrap-mode

Compatibilité des navigateurs

Voir aussi

La propriété text-wrap
La propriété text-wrap-style

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 3 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu