Is it possible to to change a <span> tag (or <div>) to preformat its contents like a <pre> tag would using only CSS?
How to change a span to look like a pre with CSS?
Viewed 62014
8 Answers
Look at the W3C CSS2.1 Default Style Sheet or the CSS2.2 Working Draft. Copy all the settings for PRE and put them into your own class.
pre {
display: block;
unicode-bidi: embed;
font-family: monospace;
white-space: pre;
}
This makes a SPAN look like a PRE:
span {
white-space: pre;
font-family: monospace;
display: block;
}
Remember to change the css selector as appropriate.
Specifically, the property you're looking at is:
white-space: pre
http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop
while the accepted answer is indeed correct, if you want the text to wrap you should use:
white-space: pre-wrap;
Why not just use the <pre> tag, instead of the span tag? Both are inline, so both should behave in the way you would like. If you have a problem overriding the entire definition of <pre>, just give it a class/id.
Related