Un petit des­sin vaut mieux qu’un long discours [HTML] pre per­met de ren­trer du texte « tel quel ». [CSS] white-space:pre-wrap fait de même, mais replie les lignes. Il n’est mal­heu­reu­se­ment géré...

Un petit des­sin vaut mieux qu’un long discours

1. [HTML] pre per­met de ren­trer du texte « tel quel ».
2. [CSS] white-space:pre-wrap fait de même, mais replie les lignes. Il n’est mal­heu­reu­se­ment géré que par Opera
3. voici les les exten­sions pro­prié­taires pour les autres navigateurs
   • Mozilla : white-space:-moz-pre-wrap
   • Inter­net Explo­rer 5.5+ et Safari : word-wrap:break-word
   • Inter­net Explo­rer 5.5+ aussi : _white-space: pre

Je n’aime tou­jours pas les hacks, mais ça, ça ne mange presque pas de pain et sur­tout, ça ne touche pas à la structure.

Mon enquête montre que ceci rem­place la balise pre (qui est pour­tant sur­tout une balise de pré­sen­ta­tion, quand on y pense), sauf pour Safari.

Pour rap­pel, la totale, trouvé sur pre-wrap alter­na­tives (les deux valeurs Opera-only ne sont là que par souci de com­plé­tude, Opera gérant la vraie valeur).

..wordwrap { 	white-space: pre-wrap;	/* css-3 should we be so lucky... */ 	white-space:-moz-pre-wrap;	/* Mozilla, since 1999 */ 	white-space:-pre-wrap;	/* Opera 4-6 ’ */ 	white-space:-o-pre-wrap;	/* Opera 7 ’ */ 	word-wrap: break-word;	/* Internet Explorer 5.5+ */ 	_white-space: pre;		/* IE only hack to re-specify in addition to word-wrap */ }

Et donc le code que j’ai ajouté à ma CSS :

code	{ 	white-space:pre-wrap; 	white-space:-moz-pre-wrap;	/* Mozilla*/ 	word-wrap:break-word		/* IE 5.5+ et Safari */ }