Faire le design du site Web avec le css...
Découvrez tout ce que vous devez savoir sur la propriété CSS overflow-wrap avec ce tutoriel. Apprenez comment utiliser cette propriété pour contrôler le retour à la ligne de texte dans vos éléments HTML, les différentes valeurs possibles, les astuces et les conseils pour une utilisation optimale.
La propriété CSS `overflow-wrap` permet de contrôler le comportement de la mise à la ligne de texte dans un élément HTML lorsque le contenu dépasse la largeur de l'élément.
La syntaxe générale de la propriété `overflow-wrap` est la suivante :
overflow-wrap: valeur;
où `valeur` peut être l'une des options suivantes :
Valeurs par défaut | normal |
---|---|
Inherited: | oui |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.overflowWrap="normal" |
Les valeurs possibles pour la propriété `overflow-wrap` sont les suivantes :
Imaginons que nous avons un élément HTML avec un texte très long :
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>La propriété css overflow-wrap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .texte { border: black solid 1px; width: 200px; padding: 5px; overflow-wrap: normal; } </style> </head> <body> <h1>La propriété css overflow-wrap</h1> <div class="texte"> Lorem ipsum dolorsitametconsecteturadipiscingelit. Donec sed magna vitae odio faucibus suscipit ac et quam. Mauris non lacus risus. Curabitur mattis magna quis justo ultricies, a rhoncus est ornare. </div> </body> </html>
Si nous voulons que le texte se comporte comme un paragraphe normal et que la mise à la ligne ne se fasse qu'aux espaces, nous pouvons utiliser la valeur `normal` pour la propriété `overflow-wrap` :
Code cssoverflow-wrap: normal;
Si nous voulons que le texte se comporte comme une zone de texte et que la mise à la ligne se fasse aussi à l'intérieur des mots si nécessaire, nous pouvons utiliser la valeur `break-word` pour la propriété `overflow-wrap` :
Code cssoverflow-wrap: break-word;
En résumé, la propriété `overflow-wrap` est très utile pour contrôler le comportement de la mise à la ligne de texte dans les éléments HTML. Elle peut être utilisée pour faire en sorte que la mise à la ligne se fasse uniquement aux espaces, ou pour permettre une mise à la ligne à l'intérieur des mots si nécessaire. Il est important de choisir la valeur appropriée pour votre contenu et de vous assurer que le texte reste lisible. Gardez également à l'esprit que la propriété `overflow-wrap` ne modifie pas la taille de l'élément, elle ne fait que modifier le comportement de la mise à la ligne, et qu'elle peut ne pas fonctionner sur certains navigateurs plus anciens.
Explorateur | |||||
---|---|---|---|---|---|
Verssion | 23 | 18 | 49 | 6.1 | 12.1 |