La propriété css overflow-wrap

Comment éviter le débordement de texte avec overflow-wrap?

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.

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 css

  overflow-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 css

  overflow-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.