Accueil    CSS    Propriété white-space
 



style css white-space  Style CSS white-space

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété white-space permet de contrôler la gestion des espaces et des retours à la ligne d'un bloc de texte par rapport à son conteneur.

Ses différentes valorisations sont les suivantes :

   - normal : les espaces adjacents fusionnent en un seul espace, le texte effectue les retours à la ligne quand il atteint la limite de son conteneur.
   - nowrap : les espaces adjacents fusionnent. Le texte ne fait pas de retour à la ligne même en atteignant la limite de son conteneur. Seule la balise <br /> provoque un retour à la ligne.
   - pre : comportement similaire à la balise html <pre> : les séquences d'espaces sont préservées ainsi que les retours à la ligne du texte d'origine.
   - pre-line : les espaces adjacents fusionnent. Les retours à la ligne du texte d'origine sont respectés et ont lieu également lorsque le texte atteint la limite de son conteneur.
   - pre-wrap : les séquences d'espaces sont préservées. Les retours à la ligne du texte d'origine sont respectés et ont lieu également lorsque le texte atteint la limite de son conteneur.

Les propriétés word-break et word-wrap peuvent également être employées pour déterminer comment s'effectuent les retours à la ligne d'un texte au sein d'un élément.



Propriétés pour le style white-space :




Propriété Définition Valeurs CSS
white-space Décrit la gestion des espaces et des retours à la ligne au sein d'un texte normal
nowrap
pre
pre-line
pre-wrap
inherit
CSS 1


Exemple d'utilisation du style css white-space :





Application des différentes valeurs pour la propriété white-space :

<div style="border:solid 1px black; width:450px; padding:5px; white-space:normal;">
Exemple de texte au sein de l'élément div avec la propriété white-space : normal.
<br />Retour à la ligne suite à un line break (br)
Retour à la ligne classique
</div>

<div style="border:solid 1px black; width:450px; padding:5px; white-space:nowrap;">
Exemple de texte au sein de l'élément div avec la propriété white-space : nowrap.
<br />Retour à la ligne suite à un line break (br)
Retour à la ligne classique
</div>

<div style="border:solid 1px black; width:450px; padding:5px; white-space:pre;">
Exemple de texte au sein de l'élément div avec la propriété white-space : pre.
<br />Retour à la ligne suite à un line break (br)
Retour à la ligne classique
</div>

<div style="border:solid 1px black; width:450px; padding:5px; white-space:pre-line;">
Exemple de texte au sein de l'élément div avec la propriété white-space : pre-line.
<br />Retour à la ligne suite à un line break (br)
Retour à la ligne classique
</div>

<div style="border:solid 1px black; width:450px; padding:5px; white-space:pre-wrap;">
Exemple de texte au sein de l'élément div avec la propriété white-space : pre-wrap.
<br />Retour à la ligne suite à un line break (br)
Retour à la ligne classique
</div>


Exemple de texte au sein de l'élément div avec la propriété white-space : normal.
Retour à la ligne suite à un line break (br) Retour à la ligne classique

Exemple de texte au sein de l'élément div avec la propriété white-space : nowrap.
Retour à la ligne suite à un line break (br) Retour à la ligne classique

Exemple de texte au sein de l'élément div avec la propriété white-space : pre.
Retour à la ligne suite à un line break (br) Retour à la ligne classique

Exemple de texte au sein de l'élément div avec la propriété white-space : pre-line.
Retour à la ligne suite à un line break (br) Retour à la ligne classique

Exemple de texte au sein de l'élément div avec la propriété white-space : pre-wrap.
Retour à la ligne suite à un line break (br) Retour à la ligne classique