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

Question

Is it possible to to change a tag (or

) to preformat its contents like a

 tag would using only CSS?         


        

相关标签:

Answer 1

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

Answer 2

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;
}

Answer 3

See the white-space CSS property.

.like-pre { white-space: pre; }

Answer 4

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.

Answer 5

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.

Answer 6

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

white-space: pre-wrap;