indicate automatic line break in white-space: pre-wrap element

Question

I'm using white-space: pre-wrap style on a HTML <pre> element to allow lines to break when they are longer than the browser window is wide.

Unfortunately those broken lines also look as if they have a line break at the end; the user cannot see if it was an automatic line break.

Is there a way to show either at the end of the line that wrapping is going on (as emacs does with a \ character), or at the beginning of wrapped lines that they are a continuation of a previous line (e.g. with →)?

Copying & pasting should not copy the continuation characters.

---

Example code:

<pre style="white-space: pre-wrap">for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, posx+selwidth-selheight, selheight, posx-selheight, selheight]);</pre >

Preferred rendering, with a → at the beginning of continuation lines:

for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=
→initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, 
→posx+selwidth-selheight, selheight, posx-selheight, selheight]);

Answer 1

Pre is intended to keep text as it was typed. It helped keep poems and speciality text as they were intended to be seen and not formatted by the browser. I would think most people will be able to tell a line of text is being wrapped in Pre with whitespace: pre-wrap because it would look something like this: Five little monkeys jumping on the bed, {{line break}} One fell off and bumped his head. {{line break}} Mama called the Doctor and the Doctor said,{{line break}} "No more monkeys jumping on the bed!'.{{line break}}

If you went with straight HTML <p> it would look as you had typed it in your example and <pre> with whitespace: pre-wrap would look the space as you have it typed.

To color the ends of each line you might try putting a <span> and give it CSS to color and size or do a <span> on the whole sentence giving it a CSS background color.

Answer 2

AFAIK not with CSS, instead you can replace every newline with 2 newlines so newlines will be distinguished when text wraps, to do this either manually enter two -or more- line-breaks <br>s for each new line, or if you can use javascript then you can replace each semi-colon ; -because the provided example in the question is code where each line ends with ;- replace it with ;\n\n -or with ;<br><br> instead- thus it will recognized.

JS Fiddle

var pre = document.getElementsByTagName('pre')[0],
  preHTML = pre.innerHTML;

pre.innerHTML = preHTML.replace(/;\s*/g, ";\n\n");

<pre style="white-space: pre-wrap">for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, posx+selwidth-selheight, selheight, posx-selheight, selheight]);</pre >