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>

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.

Support de Navigateurs

55.0 partial 12.0 -ms- 43.0+
6 - 42 -moz-
5.1 -webkit- 42.0 partial


Trouvez-vous cela utile?

Articles Associées