OUJOOD.COM
Maîtriser la mise à la ligne avec la propriété css overflow-wrap
Définition de la propriété css overflow-wrap
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.
Syntaxe générale de la propriété css overflow-wrap
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 :
- - `normal`: La mise à la ligne se fera uniquement aux emplacements définis par les espaces ou les tirets de l'élément.
- - `break-word`: La mise à la ligne se fera aussi à l'intérieur des mots si nécessaire pour éviter le débordement de l'élément.
| Valeurs par défaut | normal |
|---|---|
| Inherited: | oui |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.overflowWrap="normal" |
Valeurs possibles de la propriété css overflow-wrap
Les valeurs possibles pour la propriété `overflow-wrap` sont les suivantes :
- - normal: La valeur par défaut. La mise à la ligne se fait uniquement aux emplacements définis par les espaces ou les tirets.
- - break-word: La mise à la ligne se fait aussi à l'intérieur des mots si nécessaire pour éviter le débordement de l'élément.
- - anywhere: Les mots longs se brisent s'ils débordent du récipient.
Exemple pratique d'utilisation de la propriété css overflow-wrap
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;
Astuces et conseils d'utilisation de la propriété css overflow-wrap
- - La propriété `overflow-wrap` est très utile pour contrôler le comportement de la mise à la ligne dans les zones de texte, les paragraphes et les titres d'une page web.
- - La valeur `break-word` peut être très utile lorsque vous voulez éviter que des mots longs ne dépassent de la largeur d'un élément, mais elle peut également rendre la lecture plus difficile si elle est utilisée de manière excessive.
- - Si vous utilisez `break-word`, assurez-vous que le texte reste lisible et que les mots ne sont pas coupés de manière aléatoire. Vous pouvez ajuster la largeur de l'élément ou ajouter des tirets pour aider à maintenir une lisibilité maximale.
- - Gardez à l'esprit que la propriété `overflow-wrap` peut ne pas fonctionner sur certains navigateurs plus anciens, donc si la compatibilité avec les anciens navigateurs est importante pour vous, vous pouvez utiliser la propriété `word-wrap` qui a une fonction similaire mais est une version plus ancienne de la propriété.
- - Il est important de noter que la propriété `overflow-wrap` ne fonctionne que lorsque le contenu dépasse la largeur de l'élément. Si le contenu est plus court que la largeur de l'élément, la propriété `overflow-wrap` n'affectera pas la mise à la ligne.
- - N'oubliez pas 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. Si vous voulez modifier la taille de l'élément pour éviter le débordement du contenu, vous devrez utiliser la propriété `width` ou `max-width`.
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.
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 | 23 | 18 | 49 | 6.1 | 12.1 |