OUJOOD.COM
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.
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é.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 | 5.5 | 3.5 | 3.1 | 10.5 |