Comparaison de chaînes avec l'algorithme d'"ordre naturel" (insensible la casse)
Apprenez à utiliser la propriété word-wrap en CSS pour gérer efficacement les textes longs. Notre guide vous offre des conseils et astuces pour une meilleure lisibilité et une mise en page optimale.
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.
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" |
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 : 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>
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 |