Is it possible to indent wrapped lines within code blocks via CSS?

Question

I have some code inside an HTML document. The code itself is not important – I've used lorem ipsum to make this clear.

<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet diam sit amet sem accumsan faucibus ac in arcu. Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</code></pre> 

I've applied white-space: pre-wrap to the code block to force long lines to wrap as necessary. I'd like to know whether it's possible to indent the wrapped portion of the wrapped lines, to give something like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet diam sit amet sem accumsan faucibus ac in arcu. Quisque varius, erat vel euismod ornare, libero orci laoreet velit,         at lobortis sem nisl et eros. 

Answer 1

It is kind of possible... I'm not using using the <pre> and <code> tags and I'm not sure how important these tags are to you... but I've been able to get the style you're looking for and mimick the formatting as best as I could. Check it out.

http://jsfiddle.net/PVZW5/7/

CSS

div {     margin-left:24px;     width:400px; }  p {     font-family: "Courier New", Courier, monospace;     font-weight: normal;     font-style: normal;     font-size: 13px;     margin:0 28px;     text-indent: -28px; } 

HTML

<div>     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>     <p>Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.</p>     <p>Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</p> </div> 

Take a look at this SO question and some solutions that have come from it. It is relevant to your question. It might be worth your time to take a look :)

I hope this helps!