Is it possible to to change a <span> tag (or <div>) to preformat its contents like a <pre> tag would using only CSS?
+11
A:
Look at the w3C defaults. Copy all the settings for PRE and put them into your own class.
Diodeus
2008-10-20 17:28:39
It's a good idea to do it this way in order to understand where these defaults come from.
Diodeus
2008-10-21 15:07:46
+3
A:
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
Sören Kuklau
2008-10-20 17:32:55
A:
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.
Sometimes you already have a span on a page and can't change it, like if it's part of an existing CMS system.
Mr. Shiny and New
2008-10-20 17:37:50
B/c the framework is refusing to put the contents under my <pre> the way I'm asking it to. I could work around it, but that's a lot harder than just setting a few CSS props.
jsight
2008-10-20 18:04:04
A:
This isn't possible using just css.
However you can do it clientside using javascript. A good library such as jQuery would help you there.
Or serverside by processing the html. There you could possibly use xml tranforms or a regular expressions.
Could you describe in more detail what you are trying to accomplish.
automatic
2008-10-20 17:34:03
+12
A:
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.
Mr. Shiny and New
2008-10-20 17:35:38