如何在 div 中附加多行模板字符串？答案

【问题标题】：How to append multi line template string in div?如何在 div 中附加多行模板字符串？
【发布时间】：2015-11-06 22:38:51
【问题描述】：

我有一个模板字符串如下：

var temp = `
for i in range(10):
    print i`

我希望这个模板代码应该出现在 div 之间。
我在 index.html 中的 div 是：

<div id = "code" style="height:500px;top:0;border: 1px solid black;"></div>

我触发追加的javascript代码是：

$('#code').append(temp);

我想要的输出是：

for i in range(10):
        print i

我的输出是：

for i in range(10):print i

请建议我一些方法来获得我想要的适当间距和线条。我试过(temp.split('\n')).join('<br>') 它在单独的行中打印temp，但它不能确保适当的间距。像这样：

for i in range(10):
print i

【问题讨论】：

【解决方案1】：

您还可以使用名为 white-space 的 CSS 属性。

这使您可以将div 像pre 或code 标签一样工作。

#code {
  white-space: pre-wrap;
}

【讨论】：

【解决方案2】：

如果您想按原样格式化文本，请使用<pre> 标签。

HTML Preformatted Text() 表示预格式化文本。此元素中的文本通常以不成比例的字体显示，与文件中的布局完全相同。此元素内的空格显示为已键入。

【讨论】：