Formating Preformated Text on Your Website

On occasion, I have used the html <pre> tab to preformat an error message or other standout text in a post. 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.

Well, there is a very simple CSS hack. Open up your stylesheet (be sure to make a backup first) and add this code to the bottom.

/* Browser specific (not valid) styles to make preformatted text wrap */

pre {
white-space: pre-wrap; /* css-3 */
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+ */
}

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 hack, but this is the quickest and easiest. 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. 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. You could add borders, change the font, in fact apply all kinds of special formating. Just remember it will apply site wide to all pre text if you add the code to the stylesheet.