Tutoriel sur la propriété CSS word-break

La propriété CSS word-break est utilisée pour spécifier le comportement de rupture des mots dans un élément.

Définition de la propriété word-break

La propriété word-break contrôle la façon dont les mots longs et non divisibles sont traités lorsqu'ils atteignent la fin d'une ligne.

Syntaxe générale de la propriété word-break

La syntaxe générale de la propriété word-break est la suivante :

word-break: valeur;

Valeurs par défaut	normal
Inherited:	oui
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.wordBreak="break-all"

Valeurs possibles de la propriété word-break

normal: Les mots ne sont pas cassés à la fin d'une ligne.
break-all: Les mots peuvent être cassés à n'importe quel caractère.
keep-all: Les mots ne sont pas cassés à l'intérieur d'une séquence d'écriture (comme le chinois ou le japonais).
break-word: Pour prévenir tout débordement, le mot peut être brisé à des points arbitraires.

Exemples pratiques d'utilisation de la propriété word-break

Voici quelques exemples d'utilisation de la propriété word-break:

Exemple 1:

      .text {
        word-break: normal;
      }

Cet exemple définit la valeur normal pour la propriété word-break sur un élément avec la classe text. Les mots ne seront pas cassés à la fin d'une ligne.

Exemple 2:

      .text {
        word-break: break-all;
      }

Cet exemple définit la valeur break-all pour la propriété word-break sur un élément avec la classe text. Les mots peuvent être cassés à n'importe quel caractère.

Exemple 3:

      .text {
        word-break: keep-all;
      }

Cet exemple définit la valeur keep-all pour la propriété word-break sur un élément avec la classe text. Les mots ne seront pas cassés à l'intérieur d'une séquence d'écriture.

Exemple 4 :¨

Exemple : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel sur la propriété css word-break </title> 
<style>
.txt {
  line-height: 1.3;
  font-size: 16px;
  width: 500px;
  background-color: #eee;
  padding: 10px;
}

.break {
  word-break: break-all;
}

</style>
</head>
<body>
<p class="txt">
  Par défaut, les liens traversent l'élément enveloppant qui les contient : <a href="#">www.abdpaoeg[apeoaepogjapeojgpaokcojaoejpfjaepofjapoefjapefjapeapceuhja[ekg.com</a> si vous souhaitez obtenir de plus amples informations.
</p>

<p class="txt break">
 Il est également possible de couper le lien avec la propriété word-break : <a href="#" class="break">www.abdpaoeg[apeoaepogjapeojgpaokcojaoejpfjaepofjapoefjapefjapeapceuhja[ekg.com</a> si vous êtes intéressé par de plus amples informations.
</p>
</body></html>

Dans cet exemple la classe .break est utilisée pour appliquer la propriété word-break avec la valeur break-all à un paragraphe. Cette valeur permet de couper les mots à n'importe quel caractère, ce qui est particulièrement utile pour les liens longs.

Astuces et conseils d'utilisation de la propriété word-break

La valeur normal est généralement utilisée par défaut et permet aux mots de dépasser la limite de la ligne sans être cassés.
La valeur break-all peut être utile lorsque vous souhaitez forcer la cassure des mots à chaque caractère, même en plein milieu d'un mot.
La valeur keep-all est souvent utilisée pour les langues qui n'utilisent pas d'espaces entre les mots, comme le chinois ou le japonais, afin de conserver l'intégrité des séquences d'écriture.
La propriété word-break est utile pour améliorer la lisibilité et l'ajustement du texte dans des mises en page responsives ou des conteneurs à largeur fixe.
Il est recommandé de combiner la propriété word-break avec overflow-wrap: break-word; pour obtenir un meilleur contrôle sur la casse des mots dans différents scénarios.

En conclusion, la propriété CSS word-break permet de contrôler la manière dont les mots sont cassés à la fin des lignes. En choisissant la bonne valeur, vous pouvez améliorer la lisibilité et l'ajustement du texte dans vos designs web.