Specify automatic line break in white space: pre-packing element

Question

I use the white-space: pre-wrap style for the HTML <pre> element to allow line breaks when they are longer than the browser window.

Unfortunately, these 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 the completion is happening (as emacs does with the \ character), or at the beginning of the wrapped lines that they are a continuation of the previous line (for example, using → )?

Copy and paste must not copy continuation characters.

---

Code example :

 <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 → 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 designed to save text as you type. This helped to preserve verses and special text, as they were intended to be viewed and not formatted by the browser. I would think that most people would be able to say that a line of text is wrapped in Pre with a space: pre-wrap, because it would look something like this: Five little monkeys jumping onto the bed, {{line break}} One fell and hit his head . {{Line break}} Mom called the doctor and the Doctor said: {{line break}} "There are no more monkeys jumping on the bed!" {{Line break}}

If you went with direct HTML <p> , it would look like you typed it in your example and <pre> with a space: pre-wrap would look at the space as you typed it.

To color the ends of each line, you can try putting a <span> and giving CSS color and size, or making a <span> for the whole sentence, giving it a CSS background color.

Answer 2

AFAIK is not with CSS, instead you can replace each new line with two new lines so that newline characters are highlighted when wrapping text, to do this either manually, or enter two or more break lines <br> for each new line, or if you can use javascript, then you can replace each half-column ; , because the example given in the question is the code where each line ends with ; - instead replaces it with ;\n\n -or instead ;<br><br> will be 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 >