The pre tag is great for taking text written and formatted somewhere else and making sure it looks right (ie, as the author intended). It’s commonly used for code snippets as it maintains line breaks and formatting (all those tab and newline characters).

I was pulling textual data from a database for a report and realized the user-inputted line breaks were hosed. I therefore wrapped the output in a pre tag, which showed the formatting (yay!) but busted the page width by allowing the lines to extend far beyond the containing div.

I played around with the white-space CSS declaration, to no real avail. Then I found this article on a hack that can be used to trick a variety of browsers into wrapping the lines while still preserving the other formatting elements. The hack is by T. Longren, and looks like this:


pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}