缩进`pre`代码块中的后续行

Question

在大多数现代文本编辑器中，长行的文本都是以与它开始时相同的缩进级别进行包装。

Brackets的屏幕截图：

与界面元素相同，以便更好地理解：

但是在CSS中，使用 $("#upload-add-product").click(function(){ $("#upload-file").click(); }); ... ，长行会缩进到窗口的左侧：

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; }代码块的原因。

是否可以使用CSS / JS模拟类似于Brackets的东西？

此外，这个问题可能已在某些图书馆解决，例如Google Prettify，但我不知道。

Answer 1

您可以使用css：

p {
  margin-left: 100px;
}

或者参考这个 - https://css-tricks.com/multi-line-padded-text/