How to change a span to look like a pre with CSS?
Is it possible to to change a <span>
tag (or <div>
) to preformat its contents like a <pre>
tag would using only CSS?
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;
}
See the white-space CSS property.
.like-pre { 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.