指示空格中的自动换行符:pre-wrap元素

问题描述

我在HTML < pre> 元素上使用 white-space:pre-wrap 样式，以允许行长于浏览器窗口时中断宽.

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.

有没有一种方法可以在换行的末尾显示(例如emacs使用 \ 字符)，或者在换行的开始处显示它们是连续的上一行的内容(例如，使用→)?

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.

示例代码:

<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]);

推荐答案

AFAIK不使用CSS，而是可以将每个换行符替换为2个换行符，以便在换行时区分换行符，方法是手动输入两个-或更多-每个新行的换行符&br; br> ，或者，如果您可以使用javascript，则可以替换每个分号; -，因为问题中提供的示例是每行以 ; 结尾的代码-用; \ n \ n -替换或改为使用;< br>< br> -这样，它将被识别.

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小提琴

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 >

>

这篇关于指示空格中的自动换行符:pre-wrap元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！