表示空白区域中的自动换行:预换元素

Question

我在white-space: pre-wrapHTML <pre>元素上使用样式,以允许行在比浏览器窗口宽时更长时断行.

不幸的是,那些断线也看起来好像在最后有一个换行符; 用户无法看到它是否是自动换行符.

有没有办法在行的末尾显示正在进行包装(如emacs对\字符进行处理),或者在包装行的开头显示它们是前一行的延续(例如with ?)？

复制和粘贴不应复制延续字符.

---

示例代码:

<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 包裹在带有空白的 Pre-wrap 中，因为它看起来像这样： 五只小猴子在床上跳跃，{{换行}}一只掉了下来并撞了他的头。{{linebreak}}妈妈打电话给医生，医生说，{{linebreak}}“不再有猴子在床上跳了！”。{{linebreak}}

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

要为每行的末端着色，您可以尝试放置 a<span>并为其指定 CSS 颜色和大小，或者<span>对整个句子执行 a 并为其指定 CSS 背景颜色。