hyphens

Baseline 2023 *

Newly available

Depuis September 2023, 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.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

Exemple interactif

hyphens: none;

hyphens: manual;

hyphens: auto;

<section id="default-example">
  <p id="example-element">Un mot extraordinairement long en français&nbsp;!</p>
</section>

#example-element {
  border: 2px dashed #999999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
}

Note : Dans la démonstration ci-dessus, la chaîne « Un mot extraordinairement long en français ! » contient le caractère caché  (trait d'union conditionnel) : Un mot extraordinairement long en français !. Ce caractère est utilisé pour indiquer un emplacement potentiel où produire un trait d'union lorsque hyphens: manual; est défini.

Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut lang et les navigateurs appliqueront les règles uniquement si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut xml:lang.

Note : Les règles exactes qui définissent la production des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.

Si elle est prise en charge, hyphenate-character peut être utilisée pour définir un caractère de coupure alternatif à produire en fin de ligne.

Syntaxe

css

/* Valeurs avec un mot-clé */
hyphens: none;
hyphens: manual;
hyphens: auto;

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

Valeurs

none: Les mots ne sont pas coupés en fin de ligne et ce même si les caractères invitent à une coupe. Les lignes se termineront uniquement sur des blancs.
manual: Valeur par défaut. Les mots sont coupés pour le retour à la ligne uniquement là où des caractères à l'intérieur du mot suggèrent des opportunités de coupure. Voir Suggérer des emplacements de coupure pour les lignes ci-dessous pour plus de détails.
auto: Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.

Note : Le comportement défini par auto dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML lang pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.

Note : Si vous appliquez word-break: break-all, aucun trait d'union n'est affiché, même si le mot est coupé à un emplacement de coupure.

Suggérer des emplacements de coupure pour les lignes

Deux caractères Unicode peuvent être utilisés manuellement pour indiquer des emplacements où produire un saut de ligne :

U+2010 (HYPHEN): Le caractère de trait d'union « dur » indique un emplacement visible pour un saut de ligne. Même si la ligne n'est pas coupée à cet endroit, le trait d'union est affiché.
U+00AD (SHY): Un trait d'union invisible, « soft » hyphen (pour « trait d'union doux »). Ce caractère n'est pas affiché visiblement ; il marque un endroit où le navigateur doit produire une coupure si nécessaire. En HTML, utilisez  pour insérer un trait d'union conditionnel.

Note : Lorsque l'élément HTML <wbr> provoque un saut de ligne, aucun trait d'union n'est produit.

Définition formelle

Valeur initiale	`manual`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

hyphens = 
  none    |
  manual  |
  auto

Exemples

Définir la coupure des mots dans le texte

Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configurations possibles pour la propriété hyphens.

HTML

html

<dl>
  <dt><code>none</code>: aucun trait d'union, dépassement si nécessaire</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: un trait d'union uniquement à &amp;hyphen; ou &amp;shy;
    (si nécessaire)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt>
    <code>auto</code>: un trait d'union où l'algorithme l'estime nécessaire
  </dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

css

dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

Résultat

Spécifications

Specification
CSS Text Module Level 3 # hyphens-property

Compatibilité des navigateurs

Voir aussi

La propriété content
La propriété overflow-wrap (de façon formelle word-wrap)
La propriété word-break
Guide to wrapping and breaking text

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 7 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content