Setting Width for the “pre” Tag
Posted on Apr 18, 2013 by Nate in UncategorizedThe HTML “pre” tag is really useful if you need to display text that’s preformatted. In other words, it will preserve any spacing and line breaks in your source text. I recently had to use the pre tag in an email app I was writing because the message text could contain some code that I didn’t want to run. However, I noticed that on long messages, the text wouldn’t break to the next line — it completely ignored the width I had set in my container div. As it turns out, there’s a cool workaround you can do with CSS that completely takes care of the problem:
pre {
font-family:Georgia, "Times New Roman", Times, serif;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
