How to change a span to look like a pre with CSS?

Question

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.

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

Try this

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}

while the accepted answer is indeed correct, if you want the text to wrap you should use:

white-space: pre-wrap;