在空格中指示自动换行:预包装元素

Question

我在HTML元素上使用white-space: pre-wrap样式，允许行在其长度超过浏览器窗口宽的时候中断。

不幸的是，这些折线看起来好像在最后有一个断线；用户无法看到它是否是一个自动换行。

是否有一种方法可以在行尾显示正在进行包装(就像emacs对\字符所做的那样)，或者在包装行的开头显示它们是前一行的延续(例如，使用→)？

复制和粘贴不应复制连续字符。

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 >

首选呈现，在连续行的开头有一个→：

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的目的是在输入文本时保留文本。它有助于保留诗歌和专业文本，因为它们的目的是被看到，而不是被浏览器格式化。我想大多数人都能分辨出一行文字是用空格包装在Pre中的，因为它看起来像这样:五只小猴子跳到床上，{{换行}一只掉下来撞到了他的头。{线折}妈妈打电话给医生，医生说：“不许再有猴子在床上跳了！”

如果您使用的是直接的HTML <p>，它看起来就像您在示例中键入的那样，而使用空格的<pre>：预包装看起来就像键入的一样。

要将每一行的末尾涂上颜色，您可以尝试将一个<span>放到颜色和大小上，或者在整个句子上做一个<span>，给它一个CSS背景色。

Answer 2

AFAIK不是用CSS，而是可以用两个换行符替换每个换行符，这样在文本包装时就可以区分换行符，这样就可以手动为每个新行输入两个-or多行<br>s，或者如果您可以使用javascript，那么您可以替换每个分号; -because，问题中提供的示例是以;结尾的代码--用;\n\n -or替换为;<br><br> --这样它就会被识别。

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 >

​