在「預」代碼塊中縮進後續行

Question

在大多數現代文本編輯器中，長長的文本行在開始時會相同縮進級別打包。從支架

截圖：

一樣，用界面元素，以便更好地理解：

但是在CSS中，與pre { white-space: pre-wrap; }，長行縮進到窗口左側：

<style> 
pre {white-space: pre-wrap} 
</style> 

<pre> 
function() { 
    if (a == b) { 
     alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.") 
    } 
} 
</pre> 

結果：

很顯然，這是不讀很方便。

這就是爲什麼大多數人使用pre { overflow-x: auto; }而不是pre { white-space: pre-wrap; }爲他們構建的站點中的代碼塊。

是否可以使用CSS/JS模擬類似於括號的內容？

此外，這個問題可能在某些庫中得到解決，例如Google Prettify，但我不知道。

Answer 1

您可以使用CSS，如：

p { 
    margin-left: 100px; 
} 

或涉及本 - https://css-tricks.com/multi-line-padded-text/