text-wrap

Exemple interactif

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-wrap: stable;

<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;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• text-wrap-mode
• text-wrap-style

Syntaxe

/* Valeurs avec un mot-clé */
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;
text-wrap: pretty;
text-wrap: stable;

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

La propriété text-wrap est définie comme un mot-clé unique choisi parmi la liste des valeurs ci-dessous.

Valeurs

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.

balance

Le texte est renvoyé à la ligne de manière à équilibrer au mieux le nombre de caractères sur chaque ligne, améliorant ainsi la qualité de la mise en page et la lisibilité. Comme le comptage des caractères et leur équilibrage sur plusieurs lignes est coûteux en termes de calcul, cette valeur n'est prise en charge que pour les blocs de texte couvrant un nombre limité de lignes (six ou moins pour Chromium et dix ou moins pour Firefox).

pretty

Produit le même comportement que wrap, sauf que l'agent utilisateur utilisera un algorithme plus lent qui privilégie une meilleure mise en page par rapport à la vitesse. Cela est destiné au corps du texte où une bonne typographie est privilégiée par rapport aux performances (par exemple, lorsque le nombre de orphelins doit être réduit au minimum).

stable

Produit le même comportement que wrap, sauf que lorsque l'utilisateur·ice modifie le contenu, les lignes qui précèdent celles qu'il modifie restent statiques plutôt que de réorganiser tout le bloc de texte.

Description

Il existe deux façons pour le texte de s'écouler sur plusieurs lignes au sein d'un bloc de contenu, comme un paragraphe (<p>) ou des titres (<h1> à <h6>). Il s'agit des sauts de ligne forcés, contrôlés par l'utilisateur·ice, et des sauts de ligne souples, contrôlés par le navigateur. La propriété text-wrap peut être utilisée pour indiquer au navigateur comment gérer les sauts de ligne souples.

La valeur que vous choisissez pour text-wrap dépend du nombre de lignes de texte que vous prévoyez de mettre en forme, si le texte est contenteditable, et si vous devez privilégier l'apparence ou les performances.

Lorsque le contenu à mettre en forme sera limité à un petit nombre de lignes, comme les titres, les légendes et les citations, text-wrap: balance peut être ajouté pour équilibrer le nombre de caractères sur chaque ligne, améliorant ainsi la qualité de la mise en page et la lisibilité. Comme les navigateurs limitent le nombre de lignes impactées par cette propriété, l'impact de cette valeur sur les performances est négligeable.

Pour les sections de texte plus longues, text-wrap: pretty peut être utilisé. Notez que pretty a un effet négatif sur les performances, il ne doit donc être utilisé que pour les blocs de texte plus longs lorsque la mise en page est plus importante que la vitesse.

La valeur stable améliore l'expérience utilisateur lorsqu'elle est utilisée sur du contenu qui est contenteditable. Cette valeur garantit que, lorsque l'utilisateur·ice modifie le texte, les lignes précédentes dans la zone en cours de modification restent stables.

Définition formelle

Syntaxe formelle

text-wrap = 
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>  

<text-wrap-mode> = 
  wrap    |
  nowrap  

<text-wrap-style> = 
  auto           |
  balance        |
  stable         |
  pretty         |
  avoid-orphans  

Exemples

Comparer les valeurs de retour à la ligne de base

HTML

<h2 class="wrap" contenteditable="true">
  Le comportement par défaut&nbsp;; le texte dans le titre se renvoie
  «&nbsp;normalement&nbsp;» à la ligne
</h2>

<h2 class="nowrap" contenteditable="true">
  Dans ce cas, le texte dans le titre ne se renvoie pas à la ligne et déborde du
  conteneur
</h2>

<h2 class="balance" contenteditable="true">
  Dans ce cas, le texte dans le titre est joliment équilibré sur plusieurs
  lignes
</h2>

CSS

.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.balance {
  text-wrap: balance;
}

h2 {
  font-size: 2rem;
  font-family: sans-serif;
}

Résultat

Le texte dans l'exemple est modifiable. Changez le texte, en ajoutant des mots longs, pour voir comment les différentes longueurs de lignes et de mots impactent le retour à la ligne.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété white-space
• La propriété white-space-collapse
• Le module de texte CSS
• text-wrap: balance CSS ^(angl.) sur developer.chrome.com (2023)
• text-wrap: pretty CSS ^(angl.) sur developer.chrome.com (2023)
• Équilibrer la typographie japonaise et coréenne ^(angl.) par Kelly Choyce-Dwan (2025)