表示在空白處自動換行：pre-wrap元素

Question

我在HTML <pre>元素上使用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包裹在空格中：預包裝，因爲它看起來像這樣： 五隻小猴子在 牀上跳躍，{{line break}} 一個摔倒了，撞了他的頭。 {{換行符}} 媽媽打電話給醫生和 醫生說，{{換行符}} 「不會再有猴子跳到牀上了！」。{{換行符}}

如果直去HTML <p>它看上去就像你已經在你的例子鍵入它和<pre>與空白：預包裝看起來的空間，你有這類型的

顏色，你可以嘗試把一個<span>每條線的兩端，給它CSS的顏色和大小或整個句子做一個<span>給它一個CSS背景顏色。

Answer 2

AFAIK不是用CSS，而是你可以用2個換行符替換每一個換行符，這樣當文本換行時可以區分換行符，這樣做可以手動輸入兩個 - 或更多 - 換行符爲<br>，或者如果可以使用JavaScript然後可以更換各分號; - 因爲在問題所提供的例子是碼，其中每行與;結束 - 與;\n\n更換 - 或;<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 >