oujood.com

Utiliser la propriété CSS hyphens pour gérer les coupures de mots

La propriété css hyphen définit si la coupure est autorisée pour créer plus de possibilités de retour en arrière dans une ligne de texte.
Découvrez comment la propriété hyphens peut améliorer la lisibilité de votre texte

chercher |

Définition et utilisation da la propriété css hyphens

La propriété CSS hyphens définit la manière dont le navigateur doit gérer les coupures de mots lors de la justification du texte.
La Syntaxe CSS
hyphens: none|manual|auto;
Voici les différentes valeurs que peut prendre la propriété hyphens :

none : le navigateur ne doit pas couper les mots.
manual : le navigateur peut couper les mots si nécessaire, mais seulement si l'élément contient des traits d'union manuels (­) indiquant où couper le mot.
auto : le navigateur peut couper les mots selon les règles de la langue utilisée.

Vo

Exemple       Copier le code

.mon-element {
  hyphens: auto;
}
ici un exemple comment utiliser la propriété hyphens dans une feuille de style :
Valeurs par défautmanual
Inherited: oui
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.hyphens="none"

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Cela indiquera au navigateur de couper les mots de l'élément ayant la classe mon-element selon les règles de la langue utilisée.

Il est important de noter que la propriété hyphens n'est pas prise en charge par tous les navigateurs. Si vous souhaitez une prise en charge maximale, vous devriez utiliser la propriété -webkit-hyphens pour Safari et Chrome, et la propriété -moz-hyphens pour Firefox.

Voici un exemple complet :

Exemple       Copier le code

.mon-element {
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
}

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion5579
10.0 -ms-
435.1 -webkit-44

Astuces et conseils pour utiliser la propriété CSS hyphens :

1- Si vous utilisez la valeur auto pour la propriété hyphens, assurez-vous d'indiquer la langue du texte dans l'élément HTML en utilisant l'attribut lang. Cela permettra au navigateur de connaître les règles de coupure de mots à appliquer.
2- La propriété hyphens peut être utile pour améliorer la lisibilité de longs paragraphes de texte justifié. Cependant, il est important de ne pas en abuser, car trop de coupures de mots peuvent nuire à la lisibilité et à l'esthétique du texte.
3- Si vous utilisez la valeur manual pour la propriété hyphens, n'oubliez pas d'insérer des traits d'union manuels (­) dans le texte pour indiquer où couper les mots.
4- Si vous utilisez la propriété hyphens, assurez-vous que le navigateur prend en charge cette propriété. Si ce n'est pas le cas, le texte ne sera pas coupé et pourra être difficile à lire. Pour une prise en charge maximale, n'oubliez pas d'utiliser les propriétés -webkit-hyphens et -moz-hyphens.
5- La propriété hyphens peut être utilisée avec tous les éléments de texte, comme les paragraphes, les titres, les listes, etc. Cependant, elle peut ne pas être prise en charge par tous les navigateurs, en particulier sur les appareils mobiles. Assurez-vous de tester la propriété hyphens sur tous les navigateurs et appareils cibles.

Exemple       Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
  <title>Page utilisant la propriété hyphens</title>
  <style>
    p {
      hyphens: auto;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
	  width: 400px;
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
    placerat, diam nec tempus consectetur, dui dolor dignissim justo, 
    at vehicula ipsum tellus in purus. Aenean euismod neque a lorem 
    ultrices, at convallis justo vehicula. Aliquam lacinia sapien 
    id dui lobortis, ut iaculis lacus vehicula.
  </p>
</body>
</html>

Dans cet exemple, le paragraphe sera coupé selon les règles de la langue française lorsqu'il sera justifié. La propriété hyphens est définie avec la valeur auto, et les propriétés -webkit-hyphens et -moz-hyphens sont également définies pour une prise en charge maximale des navigateurs.




Voir aussi nos tutoriel :

Les balises universelles

Les balises univercelles : div et span...

Balise footer

Définit un pied de page d'un document ou de la section

fprintf, fprintf

écrit une chaîne format e dans un flux