在字符串中使用新行（\ n）并在HTML中进行渲染

87

我有一句话

string display_txt = "1st line text" +"\n" + "2nd line text";

在jQuery中，我正在尝试使用

('#somediv').html(display_txt).css("color", "green")

很明显，我希望我的味精能以两行显示，但是\ n却显示在消息中。有任何快速解决方案吗？

谢谢，

— KeenUser
source

1

很清楚，答案在您的问题中，您正在尝试将div中的错误消息呈现为html，因此您可以使用<br />标签

— Murtaza

期望两行没有什么“很明确的”。相反，很显然，换行符将被呈现为纯净空间，仅在需要时才将其换行。这是HTML的工作方式，当然也是.html。

2

我只是想在上下文中将字符串存储为“第一行文本”和“第二行文本”，很明显，我希望将它们分成两行，而不是关于html的工作方式：）谢谢。

— KeenUser 2011年

相关：stackoverflow.com/questions/9726970/…–

— frederj

78

使用<br />在HTML新行：

display_txt = display_txt.replace(/\n/g, "<br />");

— 萨米奇
source

1

由于某种原因，我必须将“ \ n”转义为“ \\ n”，否则它将不起作用。（已在Chrome 46中测试）。有什么原因吗？

— Sujay Phadke 2015年

2

请注意，这只会替换\n字符串中字符的首次出现。请参阅MDN文档

— Dominic Boulanger，2016年

3

最好.replace(/\n/g, "<br />")是防止更多换行符。

— KingRider

2

我认为@vsync的答案应该被接受。

— Ayush Kumar

工作完美。谢谢。

— joshlsullivan

172

在表格单元格中将CSS设置为

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

展开摘要

— 垂直同步
source

6

所以这不是应该接受的答案吗？LE：我看到只有IE 8+链接

— gciochina

4

这个答案比设置innerHTML更好，因为它不会引起XSS漏洞。

— LinusK '16

4

此外，您可以使用，white-space:pre-line;因为空白序列会折叠成一个空白。文本将在必要时自动换行，并在换行符上显示。有关更多信息：https

— //www.w3schools.com/cssref/pr_text_white-space.asp

此答案不会将文本内的\ n转换为换行符

— irl_irl

2

@ste_irl-你是什么意思？该\n装置一个新行应打印，它并打印

— VSYNC

6

您可以使用pre标签而不是div。这会以正确的方式自动显示您的\ n。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>

— 弗兰克·沃尔德
source

1

也许.text代替.html？

0

我从数据库中获取数据并想显示一个包含的字符串时遇到以下问题\n。上面的解决方案都不适合我，我终于想出了一个解决方案：https : //stackoverflow.com/a/61484190/7251208

— 凯文·格里菲斯
source