hyphens CSS propriété

Définition de la CSS hyphens.

La propriété de Césure CSS hyphens permet de spécifier le type de césure à utiliser pour couper les mots.

Exemple de syntaxe CSS hyphens :

hyphens : manual;
hyphens : auto;
hyphens : none;

La propriété de feuille de style hyphens CSS peut prendre comme valeur de césure :

none : la césure des mots ne se fait que sur les espaces blancs, ne tient compte des caractères de césure introduits dans le mot.
manual : la césure des mots se fait sur les espaces blancs et sur les caractères de césure introduits dans le mot. Valeur par défaut.
auto : laisse le navigateur gérer les césures des mots, les caractères de césure introduit dans le mot sont sont préférés à ceux automatiques.

Exemple de code hyphens CSS

Conditions d'application de la CSS hyphens.

La propriété de feuille de style hyphens CSS est applicable sur toutes les balises HTML ou XHTML.
La propriété CSS hyphens sont spécifiques à la langue, pensez à spécifier la langue de votre page HTML.

Problème d'interprétation de hyphens en Css.

La propriété de feuille de style hyphens CSS n'est reconnue par aucun navigateur (05/2015). Vous devez utiliser les propriétés hyphens préfixées CSS

Compatibilités navigateurs de la propriété hyphens

Détails des versions de la CSS hyphens: Propriété hyphens est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS hyphens: Propriété CSS hyphens est compatible sous une forme préfixée à partir de Chrome 13; Propriété CSS hyphens est compatible sous une forme préfixée avec Firefox 6; Propriété CSS hyphens est compatible à partir de Firefox 43; Propriété CSS hyphens est compatible sous une forme préfixée à partir de Internet Explorer 10; Propriété CSS hyphens est incompatible pour Opera; Propriété CSS hyphens est compatible sous une forme préfixée à partir de Safari 5.1

Propriétés CSS préfixées de hyphens

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété hyphens CSS :

Pour faire fonctionner la propriété de feuille de style css box-sizing sur Firefox, Safari et Internet Explorer < 9 :

Exemple de Css hyphens compatible multi-navigateur :

.hyphens{
  -ms-hyphens      : border-box; /* IE */
  -moz-hyphens     : border-box; /* Firefox */
  -webkit-hyphens  : border-box; /* Safari */
  hyphens          : border-box; 
}

Exemples et astuces CSS pour utiliser hyphens

Suggérer des césures avec hyphens

Vous pouvez spécifier la césure (ou coupure de ligne) de manière conditionnelle avec le caractère  ou  ou  qui suggère une césure dans un mot.
Ce tiret conditionnel (soft hyphen) est invisible si il n'y pas de rupture du mot dans lequel il se trouve.

Exemple de tiret conditionnel ou soft hyphen :

condi&shy;tionnel
condi&#173;tionnel
condi&#xAD;tionnel

Vous pouvez spécifier la césure (ou coupure de ligne) de manière explicite avec le caractère "-" ou ‐ ou ‐ qui suggère une césure. Ce tiret (hyphen) est toujours visible même si il n'y pas de rupture à l'endroit du mot où il se trouve.

Exemple de tiret ou hyphen :

condi-tionnel
condi&#8208;tionnel
condi&#x2010;tionnel

En HTML4, la préconisation était d'utiliser le caractère (hyphen-minus) "-" ou - ou -.

Votre avis sur la définition hyphens en CSS

Votez pour la définition CSS `hyphens`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.