How to mimic <pre> with <div>

You can do that with the CSS white-space rule:

div
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

The fonts included in that rule make each character the same width which is common formatting for text in a <pre> tag.

Keep in mind that this will make all of your <div> tags behave this way. Ideally you will assign those <div> tags a class to affect only the ones you want to mimic <pre>. Something like:

div.code
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

Or, better yet, use the <code> tag if it isn't stripped out by your CMS. It acts like the <pre> tag but is semantically correct for displaying code.

To format a DIV like an PRE, you need a white-space: pre; for the DIV. Additionally you should use a monospace font, as stated in the first answer.

The solution white-space: nowrap; is not right as it does NOT display tabs and still will collapse multiple spaces (@John Conde).

• nowrap: Specifying nowrap ensures that sequences of whitespace will collapse into a single space character, but line breaks will be suppressed.
• pre: Specifying pre ensures that sequences of whitespace won’t collapse. Lines are only broken at new lines in the markup (or at occurrences of "\a" in generated content).

from: http://reference.sitepoint.com/css/white-space