【问题标题】：Can't get text to line break with <br> after inserting with innerHTML使用 innerHTML 插入后，无法使用 <br> 获取文本换行符
【发布时间】：2014-06-29 21:32:44
【问题描述】：

我对来自 Delphi 的 HTML、js 比较陌生。我已经查看了以下答案，但它们似乎对我不起作用，或者我不明白他们在说什么：

Multi line print
.innerHTML <br> breaking
html <br> and innerHTML problem

问题：我的所有文本都打印在一行中，而不是换行。

以下是 HTML 源代码。

<!DOCTYPE HTML>
<html>
<head>
  <title>Test Module</title>
</head>
<body >
<p id="demo"></p>

<button id="btnRPCTest" onclick="RPCTest()">Test RPC call</button>
<p id="RPCTarget">(RPC output here...)</p>

<script id="broker" src="scripts/rpcbroker.js" type="text/javascript"></script>
<script>
  function RPCTest() {
    var Div = document.getElementById("RPCTarget")

    Broker_CallV("XUS INTRO MSG", []);
    var text = Broker_ResultsDelim("<br />\n");
    Div.innerHTML = text;
  }
</script>
</body>
</html>

在上面，代码对服务器进行远程过程调用 (RPC)，并将结果放入我创建的自定义 TStringList 对象中，其核心是字符串数组。

下面是返回结果为字符串的代码，由指定的参数 ADelim 分隔。

function Broker_ResultsDelim(ADelim) {
  return TStringList.GetTextDelim(RPCBrokerV.Results, ADelim);
}

下面，字符串数组应该连接成一个长字符串，包含换行符。

GetTextDelim: function (Self, ADelim) {
  return (Self.FData).join(ADelim) + ADelim;
},

当我运行此代码并使用 Chrome 开发者控制台单步执行时，我可以在控制台中键入“文本”，并且换行符是正确的。

> text
"

 ...............................................................
 .................#.............................................
 ...###############.......##############..........########......
 .################......################........####...####.....
 .##.....####..........##....####.....###......##.......####....
 .###....###...##............###......##......##................
 ..##....#######.............###.....###.....###................
 .......###..##.............##########.......###....#########...
 .......###.................###...............##........###.....
 .......###.................###...............###......####.....
 ......###.................###.................####....###......
 ...###########........############.............##########......
 ......................................................###......
 ................................................########.......
 ...............................................................
<br />
"

但是在文本被插入到 div 之后，它都在一行上。我不能在这里证明这一点，因为当我复制文本（在屏幕上显示为全是一行）并将其粘贴到 StackOverflow 上的这个问题中时，突然格式正确，带有换行符。

这让我觉得文本确实包含换行 BR 代码，但它们在 div 中被忽略了。

我认为这对于熟悉 HTML 的人来说应该是一个简单的问题，但它让我在困惑中摸不着头脑。提前感谢您的帮助。

凯文

【问题讨论】：

您显然在使用脚本语言（我猜是客户端 Javascript？）。请在问题中添加适当的语言标签。另外，请提供一个有效的jsfiddle.net 来演示该问题。
我认为我无法在 jsfiddle 上演示这一点，因为它连接到我无法公开的私有后端服务器。
我在问题中添加了 javascript 标签。这样更合适吗？

@Hardy，我像这样更改了上面的代码行：Div.innerHTML = "

" + text + "

"，现在它看起来格式正确。谢谢！我看到

 是为了保留格式。我明白为什么会这样。但我不明白为什么 /BR\ 标签之前被忽略了。

标签： javascript html innerhtml

【解决方案1】：

我将忽略您生成文本的方式。我将假设它以这样的格式返回，其中每行末尾都有实际的换行符 ("\n")：

var code = 
 "\
 ...............................................................\
 .................#.............................................\
 ...###############.......##############..........########......\
 .################......################........####...####.....\
 .##.....####..........##....####.....###......##.......####....\
 .###....###...##............###......##......##................\
 ..##....#######.............###.....###.....###................\
 .......###..##.............##########.......###....#########...\
 .......###.................###...............##........###.....\
 .......###.................###...............###......####.....\
 ......###.................###.................####....###......\
 ...###########........############.............##########......\
 ......................................................###......\
 ................................................########.......\
 ...............................................................\
"

我使用\ 连接字符串，但"\n" 也可以。现在，您所要做的就是：

CSS

html {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    /* so that the text is monospace and lines up correctly */
}

HTML

<div id="holder">
</div>

JavaScript

$("#holder").append(code.split("\n").join("<br>"));
// or, without jQuery
document.getElementById("holder").innerHTML = code.split("\n").join("<br>");

fiddle

您的第二个选择是，正如哈代在 cmets 中提到的那样，使用 <pre> 标签。这将保持您提供的格式，因此您只需将code 插入<pre> 标记。

【讨论】：

也可以使用 CSS，see white-space。你最终会得到类似于<pre> 的东西。
没那么重要，反正+1。
感谢您的回复。我忘记了使用 css 来解决问题。有很多东西要学......

【解决方案2】：

在您的 javascript 中使用 <pre> 标记，例如：

<script>
  function RPCTest() {
    var Div = document.getElementById("RPCTarget")

    Broker_CallV("XUS INTRO MSG", []);
    var text = Broker_ResultsDelim("\n");
    Div.innerHTML = "<pre>" + text + "</pre>";
  }
</script>

【讨论】：

做到了。但是根据上面的评论，我将不得不进行更多研究以了解为什么需要这样做。谢谢！

【解决方案3】：

you only have one 

<br/>

在您的输出中添加标签。请注意，它位于控制台输出的末尾，您需要将 \n 换行符替换为

<br />

或替换

<p id="RPCTarget">(RPC output here...)</p>

与

<pre id="RPCTarget">(RPC output here...)</pre>

并删除尾随

<br />

【讨论】：

感谢您的回复。但是，我不认为只有一个
。只有一个显示。查看代码可以看到join命令使用了传递的分隔符。
除非您在控制台中键入文本，否则您的输出中会有很多行没有
并且有很多 \n 中断。在您对字符串执行任何操作后设置文本，因此无论文本是什么，这正是您将内部 html 设置为的内容。请尝试 pre 而不是 p 看看会发生什么。