La propriété "white-space" est un style CSS intéressant puisqu'il vous permet de dire à votre navigateur comment il doit interpréter les "blancs" ou "espaces" entre les mots.
Le style CSS white-space comprends 3 valeurs :
- normal : les blancs sont gérés normalement avec retour à la ligne
- nowrap : aucun retour à la ligne
- pre : le texte est affiché comme il est écrit dans le code source
Voici un exemple :
<html>
<head>
<style>
.div1{
width:200px;
background-color:#00ff00;
white-space:normal;
}
</style>
</head>
<body>
<div class="div1">
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié),
le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente :
(http://lorem-ipsum.studiovitamine.com)
L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil
que la page contenant ces lignes n'est pas valide, et surtout l'attention du client
n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</div>
</body>
</html>
white-space : normal;
Le texte occupe la largeur du conteneur et le retour à la ligne se fait au niveau des blancs (pas de césure au niveau des mots).
.div1{
width:200px;
background-color:#00ff00;
white-space:normal;
}
Résultat :
white-space : nowrap;
Le texte n'affiche aucun retour à la ligne et explose le conteneur dans lequel il se trouve.
.div1{
width:200px;
background-color:#00ff00;
white-space:nowrap;
}
Résultat :
Remarquez la barre de scroll horizontale !
white-space : pre;
Le texte s'affiche comme il est écrit dans le code source.
.div1{
width:200px;
background-color:#00ff00;
white-space:pre;
}
Résultat :
