How to apply a line wrap/continuation style and code formatting with css

Answer 1

This cannot be done with CSS. Sorry. :(

Answer 2

Here is one (unpleasant) way of doing this. It requires a number of bad practices. But SO is about solutions to real problems so here we go...

First each line needs to be wrapped in some sort of containing block. Span or p are probably the most appropriate.

Then the style of the containing block needs to have line height set. and a background image that contains a number of newLine glyphs at the start of every line except the first one. As this is code it would be resonable to expect it to not wrap more than 5 times. So repeating 5 times is probably enoygh.

This can then be set as the background image, and should display at the beginning of every line except the first one. I guess the resulting CSS might look like this:

p.codeLine
{
    font-size: 12px;
    line-height: 12px;
    font-family: Monospace;
    background: transparent url(lineGlyph) no-repeat 0 12px; /* move the background down so it starts on line 2 */
    padding-left: 6px; /* move the text over so we can see the newline glyph*/
}

Answer 3

I've found a solution very similar to Jack Ryan's, but with the 'continuation' character at the end of the line. It also indents the continued lines.

The CSS:

p {
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  line-height: 16px;
  margin: 0 0 16px 0;
}

.wrap-cont {
  font-family: Courier New, Monospace;
  margin-bottom: 16px;
  width: 400px;
}

.wrap-cont p {
  background: url(wrap-cont.gif) no-repeat bottom right;
  text-indent: -32px;
  margin: 0 0 0 32px;
  padding-right: 16px;
}

The HTML:

<p>For example, you may have a really long command line to display, like this:</p>
<div class="wrap-cont">
  <p>c:\Program Files\My Application\Module\bin\..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
  <p>c:\Program Files\My Application\Module\bin\..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
</div>
<p>Stackoverflow forces a line like this not to wrap.</p>

Answer 4

If you want it to be unambiguous, you'll have to add markup. I'd suggest using an <ol> with one list item per line of code, because that way you get line numbering for free. If this is too much work to do across the site, you could always add it using Javascript.