Formating Preformated Text on Your Website Preformated formatage de texte sur votre site

On occasion, I have used the html <pre> tab to preformat an error message or other standout text in a post. À l'occasion, j'ai utilisé l'onglet html <pre> preformat à un message d'erreur ou d'autres se texte dans un message. At least one Sciencetext reader was intrigued as to how I managed to wrap the text rather than it being displayed right across the post area or with a horizontal scrollbar. Au moins un Sciencetext lecteur est intrigué quant à la façon dont j'ai réussi à emballer le texte plutôt que de la droite affichées dans toute la zone de poste ou avec une barre de défilement horizontale.

Well, there is a very simple CSS hack. Eh bien, il est très simple hack CSS. Open up your stylesheet (be sure to make a backup first) and add this code to the bottom. Ouvrez votre feuille de style (assurez-vous de faire d'abord une sauvegarde) et ajouter ce code à la base.

/* Browser specific (not valid) styles to make preformatted text wrap */ / * Navigateur spécifique (non valable) pour faire des styles de texte préformaté wrap * /

pre { Pre (
white-space: pre-wrap; /* css-3 */ White-space: pre-wrap; / * css-3 * /
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ White-space:-moz-pre-wrap; / * Mozilla, depuis 1999 * /
white-space: -pre-wrap; /* Opera 4-6 */ White-space: pre-wrap; / * Opera 4-6 * /
white-space: -o-pre-wrap; /* Opera 7 */ White-space:-o-pre-wrap; / * Opera 7 * /
word-wrap: break-word; /* Internet Explorer 5.5+ */ Mot-wrap: break-word; / * Internet Explorer 5.5 + * /
} )

Save the sheet and refresh the page on which you are using the preformated chunk of text, it should now be wrapping better than Ice T. There are various other ways to implement this Enregistrer la feuille et rafraîchissez la page sur laquelle vous utilisez la preformated morceau de texte, il devrait maintenant être mieux que enveloppement Ice T. Il existe plusieurs autres façons de mettre en œuvre cette hack Hack , but this is the quickest and easiest. , Mais c'est la plus rapide et la plus simple. You can also add other CSS tags to change the font size, for instance, so that the preformated block of text doesn’t look so clunky. Vous pouvez également ajouter d'autres balises CSS pour changer la taille de la police, par exemple, de sorte que le preformated bloc de texte ne fait pas l'air si maladroit. The Sciencetext stylesheet for instance includes font-size:0.9em; to reduce the font size to 90%, which makes it look a little more stylish. La feuille de style par exemple Sciencetext comprend font-size: 0.9em; afin de réduire la taille de la police à 90%, ce qui la rend un peu plus de style. You could add borders, change the font, in fact apply all kinds of special formating. Vous pourriez ajouter des bordures, de changer la police, en fait appliquer toutes sortes de formatage spéciaux. Just remember it will apply site wide to all pre text if you add the code to the stylesheet. Rappelez-vous simplement qu'il s'applique à l'échelle de l'ensemble du site avant de texte si vous ajoutez le code à la feuille de style.