Définition de la css white-space


Propriété css : white-space

Détails des versions feuilles de style css white-space
css1
css2
Détails de compatiblilité de la feuilles de style css white-space pour les navigateurs
Netscape 4.78
Netscape 6+
Internet Explorer 4+
Mozilla + et Firefox +
Safari 1 +


Définition de white-space

La propriété de feuille de style css white-space permet de spécifier le formatage de la source du texte contenu dans votre balise HTML ou XHTML, c'est à dire comment votre navigateur va interpréter les espaces blancs..., passages à la ligne, pas de rupture de ligne , affiche le code (alinéas et tabulations, nombres espaces) comme il est écrit dans le fichier source (votre code html).
Exemple de code :
white-space : normal;
white-space : pre;
white-space : pre-wrap;
white-space : pre-line;
white-space : nowrap;

La propriété white-space en feuille de style css peut prendre la valeur de :
- normal, affichage normal du texte (pas reconnue par les versions Netscape<6).
- pre, affichage du texte tel qu'il a été écrit (pas reconnue par Internet explorer<6).
- pre-wrap, même principe que "pre" mais ajoute des sauts de ligne pour que le texte ne sorte pas du bloc (pas reconnue par Internet explorer<8 et Firefox < 3.1). Ajouter en css 2.1.
- pre-line, supprime les espaces multiples et ajoute des sauts de ligne pour que le texte ne sorte pas du bloc (pas reconnue par Internet explorer<8 et Firefox < 3.5). Ajouter en css 2.1.
- nowrap, ne fait pas de retour à la ligne (pas reconnue par les versions Netscape<6 et par Internet explorer<6).



Application des white-space

La feuille de style white-space css est applicable sur l'ensemble des balises HTML ou XHTML.
La propriété de feuille de style white-space peut être l'équivalent de l'attribut HTML NOWARP de la balise HTML TD mais aussi de l'attribut HTML WRAP de la balise HTML TEXTAREA.
La propriété de feuille de style white-space peut être comparée à la balise HTML et XHTML PRE


Problèmes des white-space

La propriété de feuille de style css white-space peut poser des problèmes d'interprétation.


Exemples et astuces css

Cas particulier de Internet Explorer

La propriété de feuille de style css white-space css ayant la valeur de white-space : pre est interprétée si la DTD de votre page est de type :
Exemple de code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
ou
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Compatibilité FireFox < 3

Pour que la propriété css pre-wrap fonctionne sous Firefox < 3 utilisez la valeur -moz-pre-wrap
Exemple de code :
white-space: -moz-pre-wrap; /* Firefox 1.0 et 2.0 */
white-space: pre-wrap;

BUG INTERNAUTE

Explication

Vous trouverez ci-dessous divers bugs d'interprétation de la css white-space.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.



Reporter un bug ou problème d'interprétationavec la propriété white-space
La balise HTML et XHTML TD définit une cellule du tableau. La balise HTML et XHTML TD est contenu dans la balise HTML et XHTML <TR>. Exemple :<TABLE> ...[Voir]La balise HTML et XHTML TEXTAREA définit un champ de texte multiligne où une personne peut taper du texte.TEXTAREA /TEXTAREA La balise HTML et XHTML...[Voir]La balise HTML et XHTML PRE interprète telquel, le texte compris entre <PRE> et </PRE>.<PRE> </PRE>Chaque espace, chaque retour à la ligne est pris en...[Voir]