html - 表示在空白处自动换行 : pre-wrap element

Question

我正在使用 white-space: pre-wrap HTML 上的样式 <pre>元素允许在行长超过浏览器窗口宽度时换行。

不幸的是，那些虚线也看起来好像它们在末尾有一个换行符；用户看不到它是否是自动换行符。

有没有办法在行尾显示换行(就像 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 旨在保留键入的文本。它有助于保留诗歌和专业文本，因为它们旨在被浏览器看到而不是被格式化。我想大多数人都能分辨出一行文本被用 whitespace: pre-wrap 包裹在 Pre 中，因为它看起来像这样:五只小猴子跳上床，{{换行符}}一个掉下来撞到了他的头。 {{越线}}妈妈叫医生和医生说，{{换行符}}“不要再有猴子在床上跳了!”。{{line break}}

如果您直接使用 HTML <p>它看起来就像您在示例和 <pre> 中输入的一样带空格:预换行看起来像您输入的空格。

要为每行的末端着色，您可以尝试放置一个 <span>并给它 CSS 颜色和大小或者做一个 <span>给整个句子赋予 CSS 背景色。