Propriété CSS hyphens

La propriété hyphens définit comment les mots doivent être césurés lorsque le texte passe à la ligne.

La propriété hyphens peut prendre trois valeurs : none, manual, auto. Elle permet d'empêcher la césure, de l'autoriser, ou de ne l'autoriser que lorsque certains caractères sont présents.

INFO

Les règles de césure ne sont pas explicitement définies dans la spécification, donc la césure varie d'un navigateur à l'autre.

Valeur initiale	none
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	Object.style.hyphens = "none";

Syntaxe

Syntaxe de la propriété CSS hyphens

css

hyphens: none | manual | auto | initial | inherit;

Exemple de la propriété hyphens :

Exemple de la propriété CSS hyphens avec les valeurs none, manual et auto

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 55px;
        border: 1px solid #666;
      }
      p.none {
        hyphens: none;
      }
      p.manual {
        hyphens: manual;
      }
      p.auto {
        hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Hyphens property example</h2>
    <h3>none</h3>
    <p class="none">An extreme&shy;ly lengthy sentence</p>
    <h3>manual</h3>
    <p class="manual">An extreme&shy;ly lengthy sentence</p>
    <h3>auto</h3>
    <p class="auto" lang="en">An extreme&shy;ly lengthy sentence</p>
  </body>
</html>

Try it Yourself »

Résultat

CSS hyphens Property

Dans l'exemple ci-dessus, les trois valeurs sont incluses afin de visualiser les différences.

INFO

Les préfixes de navigateur ne sont plus nécessaires pour les navigateurs modernes.

Points de rupture de ligne

Grâce aux deux caractères Unicode ci-dessous, nous pouvons définir manuellement les points de rupture potentiels à l'intérieur du texte :

U+00AD (SHY/Soft hyphen)

Ce caractère est rendu invisible. Il indique un endroit où le navigateur doit couper le mot, dans le cas où nous avons besoin d'une césure. Pour insérer un SHY, utilisez .

U+2010 (HYPHEN/Hard hyphen)

Ce caractère indique une possibilité de saut de ligne visible. Le trait d'union est affiché même dans le cas où la ligne n'est pas coupée à cet endroit.

Valeurs

Valeur	Description
none	Aucune césure. Les mots ne sont pas coupés aux sauts de ligne, même si les caractères suggèrent des points de rupture.
manual	Les mots sont coupés uniquement pour le retour à la ligne là où il y a des opportunités de rupture à l'intérieur du mot. Les mots ne sont césurés qu'aux &hyphen; ou &shy.
auto	Le navigateur coupe automatiquement les mots aux points de césure appropriés. Les mots sont césurés là où l'algorithme le décide. Le comportement de la valeur `auto` dépend de la langue.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quel est l'objectif de la propriété 'hyphens' en CSS ?

Elle est utilisée pour définir comment diviser les mots afin d'améliorer la mise en page des paragraphes.Elle permet de changer la couleur du texte.Elle est utilisée pour spécifier la taille des bordures.Elle contrôle les sauts de ligne à l'intérieur des mots.Elle décide de l'espacement (padding) entre les éléments.

Propriété CSS hyphens ​

Syntaxe ​

Exemple de la propriété hyphens : ​

Résultat ​

Points de rupture de ligne ​

U+00AD (SHY/Soft hyphen) ​

U+2010 (HYPHEN/Hard hyphen) ​

Valeurs ​

Pratique ​