为什么我的 \n 换行符不起作用？答案

【问题标题】：Why is my \n newline not working?为什么我的 \n 换行符不起作用？
【发布时间】：2016-05-20 18:44:31
【问题描述】：

编辑解决

我想知道为什么以下代码不起作用 - 没有“产生”换行符有人有想法吗？谢谢

$('#results').append("Try again! \n I believe in you");

【问题讨论】：

可能重复：stackoverflow.com/questions/1155678/…
Rendering newlines in escaped html的可能重复
如果解决了，那么您应该选择一个答案，而不仅仅是编辑原始问题

标签： javascript newline

【解决方案1】：

我假设您正在执行 ajax 调用或其他操作，结果包含 '\n' 并且您无法更改它？

没关系，在 HTML 中，诸如 \n 和空格之类的东西会被忽略，除非您明确声明要使用空格。

有两种主要方法可以做到这一点。

首先是<pre>标签

$(function() {
  $('#results').append("Try again! \n I believe in you");
})

<html>
  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>

  <body>
    <pre id="results"></pre>
  </body>
</html>

第二种（更好的方法）是使用 white-space 的 css

在下一个示例中，我使用 white-space:pre-line 这只会保留您的 \n 或新行

$(function() {
  $('#results').append("Try again! \n I believe in you");
})

<html>
  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>

  <body>
    <div style = "white-space: pre-line" id="results"></div>
  </body>
</html>

请注意，第二个使用标准<div>，触发新行并且不保留\n 之后的额外空格？这可能是您正在寻找的更多内容。您也可以将其设置为 white-space:pre，并且 div 在空白和新行方面的行为应该与 <pre></pre> 一样。

white-space 有很多选择：

空白：正常|nowrap|pre|pre-line|pre-wrap|initial|inherit;

这应该可以满足您的需求。

如果您正在寻找一种非常具体的格式，您可能需要使用 Javascript 来净化文本。

还有其他方法可以让文本中断，但如果您专门使用\n，那么这是我所知道的唯一两种方法。

希望这会有所帮助！

【讨论】：

【解决方案2】：

空格不会在 html 中中断，它们会折叠成单个显示的空格，显示为。如果要在 html 中呈现中断，则必须使用中断标记 <br>

$('#results').append("Try again! &lt;br&gt; I believe in you");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>

【讨论】：

您应该选择一个答案顺便说一句，如果这是您需要的解决方案，那么这就是您应该选择的解决方案。如果它是另一个，那么您应该对其进行投票并将其标记为正确。

【解决方案3】：

它在 HTML 中，您需要使用换行符 <br>，而不是换行符。

【讨论】：

\n 如果你使用 <pre></pre> 或者如果你在 CSS 中使用 white-space:pre 会正常工作你也可以使用 'white-space:pre-line` 来忽略不是某种类型的换行符，比如\n