Tutoriel CSS : Propriété word-wrap

Définition de la propriété css word-wrap

La propriété CSS word-wrap permet de contrôler le comportement de retour à la ligne du texte long lorsque celui-ci dépasse la largeur de son conteneur.

Syntaxe générale de la propriété css word-wrap

      selector {
        word-wrap: value;
      }

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

Valeurs possibles de la propriété css word-wrap

normal: Le texte long sera coupé à la limite de la largeur du conteneur sans ajouter de retour à la ligne. Cela peut causer des débordements hors du conteneur.
break-word: Le texte long sera coupé à la limite de la largeur du conteneur avec ajout de retour à la ligne pour que le texte reste entièrement visible dans le conteneur.

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

Prenons l'exemple d'un conteneur de largeur fixe (400px) avec une classe .container :

     .long-text {
      word-wrap: break-word;
    }

Dans cet exemple, en appliquant la classe .long-text avec word-wrap: break-word;, le texte long sera coupé avec ajout de retour à la ligne afin de rester visible entièrement dans le conteneur.

Exemple 2

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>
div {
  width: 150px; 
  border: 1px solid #000000;
}

div.a {
  word-wrap: normal;/* par defaut*/
}

div.b {
  word-wrap: break-word;
}
</style>
</head>
<body>
<h1>The word-wrap Property</h1>

<h2>word-wrap: normal (default):</h2>
<div class="a"> Ce div contient un mot très long : ceci_est_un_mot_très_très_très_très_très_très_très_très_long. Le mot long ne sera pas interrompu et passera à la ligne suivante.</div>

<h2>word-wrap: break-word:</h2>
<div class="b"> Ce div contient un mot très long : ceci_est_un_mot_très_très_très_très_très_très_très_très_long. Le mot long ne sera pas interrompu et passera à la ligne suivante.</div>
</body></html>

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

La propriété word-wrap est souvent utilisée en combinaison avec la propriété white-space: pre-wrap; pour afficher correctement les espaces et les sauts de ligne.
Assurez-vous que le conteneur a une largeur définie pour que la propriété word-wrap puisse fonctionner correctement.
Utilisez la valeur break-word avec précaution, car elle peut entraîner des coupures inattendues dans certaines situations.