Propriété CSS hyphens

La propriété hyphens définit comment les mots doivent être à trait d'union lors des sauts de ligne.

La propriété hyphens a trois valeurs: none, manual, auto. Elle permet d'empêcher l'application des traits d'union ou l'autoriser, ou seulement autoriser si certains caractères sont présentes.

L'application des traits d'union fonctionne seulement si l'attribut span est spécifié, parce qu'ils sont spécifiques au langage et chaque langue a ses propres règles pour les traits d'union.

Les règles de l'application des traits d'union ne sont pas explicitement définies par la spécification, donc le comportement peut varier entre les navigateurs.

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p { 
      width: 55px;
      border: 1px solid #666;
      }
      p.none {
      -webkit-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      }
      p.manual {
      -webkit-hyphens: manual;
      -ms-hyphens: manual;
      hyphens: manual;
      }
      p.auto {
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété hyphens</h2>
    <h3>none</h3>
    <p class="none">Une phrase extrême&shy;ment longue</p>
    <h3>manual</h3>
    <p class="manual">Une phrase extrême&shy;ment longue</p>
    <h3>auto</h3>
    <p class="auto">Une phrase extrême&shy;ment longue</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, toutes les trois valeurs sont comrpises pour que vous voyiez les différences.

Pour une compatibilité maximale des navigateurs, par exemple -webkit- pour Safari est utilisée.

Valeurs

Valeur	Description
none	Aucun trait d'union. Les mots ne sont pas cassés lors des sauts de ligne, même si les caractères suggèrent des points de rupture de ligne.
manual	Les mots sont cassés seulement pour la rupture de ligne où il y a des opportunités de saut de ligne dans le mot. Les mots sont à trait d'union à ‐ ou . C'est la valeur initiale de cette propriété.
auto	Le navigateur casse automatiquement les mots aux points de césure appropriés. Les mots sont coupés lorsque l'algorithme décide. Le comportement de la valeur automatique dépend de la langue.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.