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