168-image1-fr1234963831.jpg

CSS : white-space ou comment gerer les espaces blancs

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 :
 
css white space normal
 

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 :
 
css white space nowrap
 
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 :
 
css white space pre
 

Auteur : Fabien Branchut

Fabien Branchut
Concepteur de site web depuis 2001 : développement web et SEO. Co-fondateur et directeur web de l'agence Studio Vitamine depuis 2008 : conception e-commerce, chef de projet, stratégie SEO. Site de Fabien Branchut.

Commentaires Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *