Attribut WHITE-SPACE

Rôle

L’attribut white-space permet de gérer la césure des mots (retour à la ligne).

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.whiteSpace

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

textarea.txt1{
  white-space: nowrap;
}

– Le code HTML

<textarea name="" id="txta" cols="30" rows="10">Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Saepe cumque recusandae soluta eos, quaerat expedita maxime!
</textarea>
<textarea name="" id="txtb" cols="30" rows="10" class="txtb">Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Recusandae similique voluptatum possimus fugiat sunt
</textarea>

Résultat

Remarquez que le retour à la ligne ne se fait pas dans la deuxième zone de texte

Compatibilité

L’attribut white-space est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut white-space sont:

normal

Comportement normal : valeur par défaut
Syntaxe :
white-space : normal

nowrap

Pas de retour à la ligne dans le bloc de contenu : le texte continue sur la même ligne sauf si une balise br est rencontrée
Syntaxe :
white-space : nowrap

pre

Les retours à la ligne et les espaces sont préservés par le navigateur s’ils sont présents dans le code source. Le retour à la ligne ne se fera pas automatiquement dans le bloc de contenu. Agit comme avec la balise HTML <pre>
Syntaxe :
white-space : pre

pre-line

Les retours à la ligne sont préservés par le navigateur mais pas les espaces supplémentaires
Syntaxe :
white-space : pre-line

pre-wrap

Comme la valeur pre mais avec la cesure, les espaces et les retours à la ligne sont préservés
Syntaxe :
white-space : pre-wrap

Dans cet exemple, la valeur pre est appliquée au premier bloc, alors que la valeur pre-wrap est appliquée au deuxième bloc

initial

L’espace est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » l’héritage, par exemple un paragraphe peut ignorer la gestion de la césure imposée par son élément parent.
Syntaxe :
white-space : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
white-space : inherit

A voir aussi

color– text-align– text-decoration– text-transform– text-indent– word-spacing– line-height– letter-spacing– vertical-align– direction– content