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

Unfortunately after much searching I’ve come to believe that this is currently impossible using CSS alone. What’s required is a pseudo-element for each “line” (text matching /^.*$/m), which would enable the indentation of lines beyond the first to be controlled via CSS.

I raised this issue on the www-style mailing list. fantasai’s responses are promising, particularly the suggestion that the text-indent property could be extended to allow text-indent: 2em hanging each-line.