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!

• davidchambers: This doesn't respect line breaks within the code block, unfortunately. The start of every line should be flush left, not just the first line within the code block. I appreciate the jsfiddle link, though.
• Hristo: @davidchambers... I didn't realize that you had new lines in your code. I'll go back and see if I can do it.
• Hristo: @davidchambers... please take a look at my post. I updated the link with the new solution as well as the CSS and HTML. I hope this helps you. If this isn't what you're looking for... then I don't think you can do what you using only CSS. You might have to resort to JavaScript (I recommend jQuery).
• davidchambers: While I appreciate the links, defiling code snippets with paragraph tags (or tags of any nature) is not an option I'm willing to consider. Now that I'm fairly sure that I haven't overlooked an obvious solution I plan to raise this issue on the www-style mailing list.
• Brian Campbell: @davidchambers "Defiling" code snippets? Not an option you're willing to consider? This isn't going to ruin the code somehow; people use markup in their code all the time, if they want to to group it together into logical pieces which may be styled (see, for instance, the syntax highlighting of code snippets here on StackOverflow). I don't think you're going to get much traction on www-style suggesting something that can simply be solved by marking up your paragraphs instead of relying on white-space for your paragraph boundaries.

Answer 2

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.

• ssokolow: I believe XHTML 2.0 wanted to introduce <l>line</l> as a replacement for <br /> but it fizzled out for want of an upgrade path.
• Qwertie: What's really ideal is to be able to indent by a variable amount such that a wrapped line is always indented more than the initial line... but in a CSS-only solution, I'd settle for a fixed indent.
• IanVS: I'm trying to do the same thing, and after enabling the flag in Chrome, text-indent: 2em hanging each-line seems to only apply to <p> tags, and not <code> elements. Maybe someday though!

Answer 3

text-indent: -2em;
padding-left: 2em;

• davidchambers: This doesn't respect line breaks within the code block, unfortunately.
• William Niu: I think you meant it doesn't behave as you wanted it :-) If you want a new line "unindented", you should make it a paragraph, i.e. <p>, and style it appropriately.

Answer 4

I'm not sure if this works in <pre>, but it looks promising.

http://www.ehow.com/how_2382848_hanging-indent-css.html

• davidchambers: This approach would work if each line of code were in its own element. Some JavaScript syntax highlighters replace code blocks with ordered lists, allowing CSS to control the indentation of wrapped lines. I'm seeking a CSS-only solution, however.
• Kryptoxx: Link seems broken

Answer 5

Not currently possible just with CSS, but with the help of a scripting language ...

PHP

echo '<pre id="the_pre_id"><div>'.str_replace("\n",'</div><div>',$text).'</div>';

or JavaScript

var el = document.getElementById('the_pre_id');
el.innerHTML='<div>'+el.innerHTML.replace(/\n/g, '</div><div>')+'</div>';

Note, you only need to choose one of the above snippets. Both accomplish the same thing.

We pollute the markup (non-semantic tags), but it allows us to create per-line style rules:

CSS

pre{
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre > div {
 padding-left: 1em;
 text-indent: -1em;
}

And we have exactly the effect you're looking for ...

Result

Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
De malis autem et bonis ab iis animalibus,
quae nondum depravata sint, ait optime
iudicari.
Quae cum praeponunt, ut sit aliqua rerum
selectio, naturam videntur sequi; Quasi
ego id curem, quid ille aiat aut neget.

• jeffmcneill: Looks great, but copying it gets the blank spaces   that is forced into this.

Answer 6

This article has a solution using the first-of-type pseudo selector that seems to work so far for me: http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent

html{
 margin-left: 100px;
}
p {
	margin: 6em inital;
 width: 300px;
}
p:first-of-type {
	text-indent: -4em;
}

<p>Leverage agile frameworks to provide a robust synopsis for high level 
overviews. Iterative approaches to corporate strategy foster collaborative
 thinking to further the overall value proposition.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. 
At the end of the day, going forward, a new normal that has evolved from 
generation X is on the runway heading towards a streamlined cloud solution. 
 User generated content in real-time will have multiple touchpoints for offshoring.</p>

• davidchambers: That's a useful technique but it does not answer the question. The question asks about targeting wrapped lines within in single element.